The Wookmark jQuery pluginとは

よくある、要素の高さを揃えて並べる系のアレではなく、こんな感じに異なる高さの要素を『隙間を作らずに配置する』ことが出来るjQueryプラグインです。これを使うと、上の画像(公式サイトのキャプチャ)のようなレイアウトを簡単に実現することができます。いわゆる『Pinterest』ライクな配置です。

プラグインの準備

The Wookmark jQuery pluginの配布元へアクセスして、右下にある「Download ZIP」をダウンロードします。

ZIPを解凍したら、フォルダ内にある「wookmark.js」を取り出します。

Pinterestな配置を実装したいHTMLファイルを開き、headにjQueryとwookmark.jsを読み込ませます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.wookmark.js"></script>

並べるボックスの配置を確認します。例えば、以下のようなコードだとすると、

<div id="photos">
	<ul class="tile">
		<li>写真 1</li>
		<li>写真 2</li>
		<li>写真 3</li>
	</ul>
</div>

以下のようなコードをbodyの閉じタグ直前に記述します。

<script type="text/javascript">
$(document).ready(new function() {
	var options = {
		autoResize: false,
		align: "left", // 要素を並べる方向
		container: $('#photos'), // 要素を並べる領域を囲むブロックを指定
		offset: 10, // 要素間の隙間
		itemWidth: 200 // 要素の幅
	};
	var handler = $('.tile li'); // 要素を指定
	handler.wookmark(options); // 上で指定したoptionsで実行する
});
</script>

以上で完成です。

「あれ、並ばないよ」という人は、並べたい要素のHTMLコード以降にscriptコードが記述されていないか、もしくは、jQueryのバージョンが対応していない可能性がありますので確認してみてください。