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」前のページ

ストライプの背景パターンをサクっと作ることができる「Striped Backgrounds」次のページ

関連記事

  1. bringins

    JavaScript

    コンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」

    bringinsはWebページ上のコンテンツを、アニメーションページと…

  2. no-image

    JavaScript

    ミニマルでダイナミックなLightboxプラグイン「darkbox.js」

    darkbox.jsはミニマルながらもダイナミックなLightbox風…

  3. 3D Cube CountDown script
  4. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  5. Bar Indicator

    JavaScript

    数値をインジケーターで見やすく表示できる「Bar Indicator」

    Bar Indicatorは数値をインジケーターで表示させることができ…

  6. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP