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. Jquery modal box plugin
  2. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

  3. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  4. BigText

    JavaScript

    テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

    BigTextは、テキストの行を、指定した幅にフィットさせるために必要…

  5. Chameleon.js
  6. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

コメント

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

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

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP