スポンサード

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

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

The Wookmark jQuery plugin のダウンロード

以下のサイトより、The Wookmark jQuery plugin をダウンロードします。

The Wookmark jQuery plugin の特徴

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


そこで 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>

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>

以下に The Wookmark jQuery plugin のデモページを用意しています。

ざっくり組んでるので不具合あるかもしれませんが、イメージだけでも参考いただければと思います。
The Wookmark jQuery plugin のデモ

スポンサード