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を紹介したのでよかったらこちらも合わせてどうぞ。

関連記事

  1. Jquery Line Progress Bar
  2. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

  3. Select.js

    JavaScript

    セレクトボックスをオシャレにスタイリングしてくれるJS・CSSライブラリ「Select.js」

    Select.jsはセレクトボックスをシンプルでオシャレにスタイリング…

  4. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  5. JK Responsive Youtube Video and Image Gallery
  6. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. F7U070bt
  2. 生きている玄米と玄米酵素ブレンド雑穀
  3. BOOST↑CHARGE Apple Watch用モバイルバッテリー

アーカイブ

PAGE TOP