[javascript]Pinterestのようにタイル状にコンテンツを配置できるThe Wookmark jQuery plugin

jQueryプラグイン・ライブラリ

2012.12.30

Pinterestのようなサイトをよく見るようになりました。

この手のサイトはjQuery Masonryを利用することが多いのですが、今回はThe Wookmark jQuery pluginを使ったPinterest 風のタイル状サイトを構築しましたので、その備忘録です。

The Wookmark jQuery pluginのダウンロード
The Wookmark jQuery pluginの特徴
The Wookmark jQuery pluginの設置
HTMLのサンプル

The Wookmark jQuery pluginのダウンロード

以下のサイトよりThe Wookmark jQuery pluginをダウンロードします。
http://www.wookmark.com/jquery-plugin

The Wookmark jQuery pluginの特徴

タイル状にコンテンツを横に並べていく分けですが、CSSのfloat:やdisplay:inline-blockで並べても、各要素の高さが異なるとその分隙間が出来てしまいます。

[JS]Pinterestのようにタイル状にコンテンツを並べることができるjavascript「The Wookmark jQuery plugin」

そこで jQueryプラグインjquery-wookmark.jsを利用することで、高さが異なる要素をタイル状に並べても、隙間を埋めて表示してくれるようになります。

ブラウザの幅を伸縮しても親要素の幅に合わせてコンテンツが上手く配置されますし、レスポンシブWEBデザイン対応のサイトでも充分使えます。

The Wookmark jQuery pluginの設置

jqueryファイルと一緒に、jquery-wookmark.jsファイルを読み込ませます。

オプションは、サイトに合わせて変更します。

<script src="./jquery.min.js"></script>
<script src="./jquery-wookmark.js"></script>
<script type="text/javascript">
	$(document).ready(new function() {
      
	  var options = {
        autoResize: true,　//ブラウザの伸縮に合わせて自動リサイズの設定
        container: $('#contents'),　//タイル状に並べるコンテンツの親要素
        offset: 2,　//要素間の上下左右の隙間をpxで指定
        itemWidth: 200　//各要素の幅をpxで指定
      };
      
      var handler = $('#tiles li');　//タイル状に並べる要素の指定
      
      handler.wookmark(options);　//上記オプションで実行
      
});
</script>

$(document).ready(new function() {

var options = {

autoResize: true,　//ブラウザの伸縮に合わせて自動リサイズの設定

container: $('#contents'),　//タイル状に並べるコンテンツの親要素

offset: 2,　//要素間の上下左右の隙間をpxで指定

itemWidth: 200　//各要素の幅をpxで指定

};

var handler = $('#tiles li');　//タイル状に並べる要素の指定

handler.wookmark(options);　//上記オプションで実行

});

</script>

HTMLのサンプル

タイル状に並べるコンテンツの親要素を#contents、タイル状に並べる要素をul id="tiles"にします。

<div id="contents">
    <ul id="tiles">
        <li><img src="" /></li>
        <li><img src="" /></li>
        <li><img src="" /></li>
        <li><img src="" /></li>
        <li><img src="" /></li>
    </ul>
</div>