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

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

使用方法 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;を書けましょう

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

sponsors

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

記事作成:
記事URL:

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