グリッドに沿って各要素をタイル状にレイアウトするプラグインで、有名なものでは［jQuery Masonry］が挙げられます。
この分野のjQueryプラグインでは最も知名度が高く、初心者の方でも比較的簡単に導入できるので、使っている方も多いでしょう。

ある程度の知識があればカスタマイズも容易にできるので、個人的にもお勧めできるプラグインです。

唯一の難点といえば、デフォルトでは要素のフィルタリングやソート機能に対応していないこと。

今日紹介する［Isotope］は、超高機能なフィルター機能、ソート機能を兼ね備えた「Masonry風」のプラグインです。

実装サンプル

まずはサンプルをご覧ください。

サンプル・デモ：Masonry風プラグイン［jQuery Isotope］の使い方

実はこのプラグイン、弊社オンズのウェブサイトのトップページでも利用しているので、「見覚えのある動きだ」と感じた方もいらっしゃるのではないでしょうか。

それぞれの機能を使いこなして完璧に動作させるためにはそれなりのjQueryの知識が必要で、かなりハードルが高く、中級者〜上級者向けです。しかし、その高機能さと完成度の高さゆえに、導入を検討する価値のあるプラグインだと思います。

以下、［jQuery Isotope］の導入方法です。

プラグインをダウンロードする

何はともあれ。
まずはプラグイン本体のダウンロードを。
同時にベースとなる「jQuery.js」も入手します。

ダウンロードした各ファイルは HTML の任意の場所で読み込みます。

<script src="jquery.js"></script>
<script src="jquery.isotope.js"></script>

このとき、［jquery.js］を先に読み込んでおくことがポイントの１つ。

Isotope の設定

Isotope を効かせたい箇所をマークアップします。
ここでは、親要素となるボックスに「.isotope」、その子要素となるボックスに「.item」というクラス名を与えています。

<body>
<div class="isotope">
	<div class="item">コンテンツ１</div>
	<div class="item">コンテンツ２</div>
	<div class="item">コンテンツ３</div>
	<div class="item">コンテンツ４</div>
	…
</div>
</body>

続いて jQuery でIsotopeの初期化設定を行います。

$(function() {
	$('.isotope').isotope({
	itemSelector: '.item',
	masonry: {
		columnWidth: 100
	}
	});
});

基本的な動きはすべてIsotope側で制御してくれるので、余分なCSSの設定は不要ですが、ウィンドウサイズを変更したときのなめらかな動きは CSS3 の「transition」プロパティで指定します。

.isotope .item {
    -webkit-transition-duration:0.2s;
    -moz-transition-duration:0.2s;
    -ms-transition-duration:0.2s;
    -o-transition-duration:0.2s;
    transition-duration:0.2s;
}

とりあえず、最低限の動作は上記までのコードで実装できるはずです。
フィルタリングとソート機能を使うにはオプション設定を追加します。

オプション設定について

Isotopeのオプションにと、その使い方については公式ページで詳しく紹介されています。

Isotope：オプション機能

特に使用頻度が高そうなフィルタリングとソートには、「filter」や「getSortData」、「sortBy」といったプロパティがあらかじめ用意されています。

例えば、フィルタリング機能を有効にする際は以下のコードを追加で指定します。

$container.isotope({ filter: '.selector' });

一例としては、HTML側で［data-filter］プロパティを持たせた要素を作り、Isotopeのスクリプトと連動させます。
具体的には以下のようなコードになります。

まずはHTMLファイル。フィルターを指定するボタンを作ります。

<div class="filter">
	<a href="#" data-filter="*" class="current">All Categories</a>
	<a href="#" data-filter=".filter-1">filter-1</a>
	<a href="#" data-filter=".filter-2">filter-2</a>
	<a href="#" data-filter=".filter-3">filter-3</a>
	<a href="#" data-filter=".filter-4">filter-4</a>
</div>

各フィルターに対応するそれぞれの要素は、「class」に追加していきます。

<body>
<div class="isotope">
	<div class="item filter-1">コンテンツ１</div>
	<div class="item filter-2">コンテンツ２</div>
	<div class="item filter-3">コンテンツ３</div>
	<div class="item filter-4">コンテンツ４</div>
	…
</div>
</body>

続いて、フィルタリングさせるためのJavaScriptのコードです。

$('.filter a').click(function(){
	$('.filter .current').removeClass('current');
	$(this).addClass('current');

	var selector = $(this).attr('data-filter');
	$container.isotope({
		filter: selector,
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false
			}
		});
		return false;
	});
});

上記では「data-filter」プロパティを探し出し、再レイアウトさせることでフィルタリングを実現しています。

その他の機能

［Isotope］には他にも、レイアウトモードを変更してデザインを大幅に変更したり、アニメーションをJavaScriptで制御したり、一列に表示させるボックスの数やカラムの横幅のサイズも設定可能。
各ブラウザに対応してダイナミックな動きを実現できることが大きな魅力です。

なお、商用利用は有料になり、初心者の方には取り扱いが難しいプラグインですが、ある程度jQueryのコードを理解できれば実装できるはずです。
ぜひお試しください。

サンプル・デモ：Masonry風プラグイン［jQuery Isotope］の使い方