グリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Packery］を紹介します。

百聞は一見に如かず。まずは動作サンプルをご覧ください。

Packery：動作サンプル

ご覧いただいたように、任意のボタンをクリックすることで要素が追加され、ウィンドウサイズを変えるとアニメーションを伴って再レイアウトします。
また注目すべきメインの機能である「ドラッギングによる並べ替え」は動作も大変スムーズです。
その完成度は「超高機能」と呼ぶに相応しいでしょう。

似たようなプラグインでは、当サイトでも紹介している［Masonry］や［Isotope］がありますが、驚くべきことに、実はこれらのプラグインの開発者は同一人物なんです。

プログラマーの David DeSandro 氏は、他にも［Flickity］や［ImagesLoaded］などの有名なプラグインを多数開発しています。

氏の詳しいプロフィールは以下より。

David DeSandro：ポートフォリオサイト

プラグイン［Packery］の使い方

さて。この素晴らしいプラグイン［Packery］の使い方ですが、まずは公式サイトから、必要なファイル一式をダウンロードしてきます。

Packery：公式サイト

最低限必要なのは「packery.pkgd.min.js」または「packery.pkgd.js」のどちらか１つ。通常はあらかじめ圧縮されている「packery.pkgd.min.js」を使います。

嬉しいことにjQueryに依存しないので、基本的にはこのファイル１つだけでも動作可能。
htmlファイルの <head>〜</head> 内で読み込んでおきます。

<head>
<script src="packery.pkgd.min.js"></script>
</head>

続いて［Packery］で動かす各要素を構築します。
ここでは仮に、id="packery" と名付けた親要素の中に class="item" と名付けた子要素を配置しています。

<div id="packery">
	<div class="item">...</div>
	<div class="item w2">...</div>
	<div class="item h2">...</div>
	<div class="item">...</div>
	<div class="item w3 h2">...</div>
	...
</div>

スタイルシート（CSS）も同時に定義しておきます。

.item {width:25%; height:80px;}
.item.w2 {width:50%;}
.item.h2 {height:160px;}

最後に［Packery］を動かすための設定を記述します。

<script>
var $container = $('#packery');
	$container.packery({
	itemSelector: '.item',
	gutter: 10
});
</script>

以上で、基本的な設定は完了。これだけでMasonry風のグリッドレイアウトを実装できることになります。
ドラッグによる並べ替えに対応させる場合には、別途で［Draggabilly］というライブラリを利用します。
もちろんこの「Draggabilly」もDavid DeSandro氏が制作しています。

先ほどのコードに追加で、ダウンロードしてきた「draggabilly.pkgd.min.js」を読み込みます。

<head>
<script src="packery.pkgd.min.js"></script>
<script src="draggabilly.pkgd.min.js"></script>
</head>

初期設定の箇所では「Draggabilly」を有効化する記述を追加。

<script>
var $container = $('#packery').packery({
	columnWidth: 80,
	rowHeight: 80
});
$container.find('.item').each( function( i, itemElem ) {
	var draggie = new Draggabilly( itemElem );
	$container.packery( 'bindDraggabillyEvents', draggie );
});
</script>

これで完成！

他にも、「jQuery UI」によるドラッグの対応や、レイアウトパターンの変更、要素の大きさの変更など、様々なオプションが利用可能です。
詳しい仕様は公式サイトで紹介されているので参考にしてみてください。

グリッドレイアウトのサイトを構築する際、［Masonry］や［Isotope］などの代替として、選択肢の１つに加えてみることをお勧めします。

Packery
：公式サイト
：動作サンプル