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. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  2. Excolo Slider

    JavaScript

    タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」

    タッチやマウススライドにも対応しているシンプルなjQueryスライダー…

  3. Select.js

    JavaScript

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

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

  4. jQuery Brazzers Carousel Plugin
  5. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

コメント

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

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

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP