JavaScript

レンガ風に要素を綺麗に並べてグリッドレイアウトが作れる「The Wookmark jQuery plugin」

Pinterestのように高さの異なる要素をレンガ風に綺麗に並べて、簡単にグリッドレイアウトを作ってくれる「The Wookmark jQuery plugin」を使ってみました。画面サイズによって自動でリサイズされるオプションなどもあるのでとても便利ですね。以下使い方です。

[ads_center]

使い方

jQuery本体とダウンロードしたプラグインを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="js/jquery.wookmark.js"></script>
<script type="text/javascript">
$(function() {
    $('#sample li').wookmark({
        autoResize: true,
        offset: 2
    });
});
</script>

レンガ風にする要素の記述していきます。

<ul id="sample">
    <li>サンプル</li>
    <li>サンプル</li>
    <li>サンプル</li>
    ・・・以下略・・・
</ul>

オプションは、offsetで上下左右の余白を設定したり、画面サイズによって自動でリサイズにしたりできます。Pinterestのようにレンガ風のレイアウトを作りたい場合には覚えておきたいプラグインですね。以下からダウンロードできます。

これと似た他のプラグインとして以前jQuery Masonryを紹介したのでよかったらこちらも合わせてどうぞ。

ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」前のページ

リスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」次のページ

最近の記事

  1. 抹茶クリームドーナツ
  2. FAST
  3. クリスマスブレンド
  4. ホワイトチョコマカダミアドーナツ
  5. エッグペペ
PAGE TOP