Pinterestライクに要素を整列させるjQueryプラグイン「The Wookmark jQuery plugin」

一時期流行ったデザインのため以前から要素を整列させるjQueryプラグインは多数ありました。
現在Pinterestが海外では注目されているため、これ系のデザインニーズが改めて高まりそうです。
そこで、これを実現するWookmark jQuery Pluginを紹介します。

sponsors

使用方法

Wookmark jQuery Pluginからファイルをダウンロード

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.wookmark.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#content li').wookmark({
		offset: 2 //要素間の余白
	});
});
</script>
あとは上記で指定した要素を記述すれば完成です。

<ul id="content">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
なお、#contentにはcssでposition: relative;を書けましょう

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors