jQuery Masonry をつかってみる。

高さが異なるボックスをきれいに並べる際、便利なプラグインです。
このようなデザイン、たまに見かけます。
cssではちょっと工夫が必要なレイアウトですが、この、「jQuery Masonry」を使うと、きれいに・簡単に出来るんです。

jQuery Masonry

ちょっと見にくいかもしれませんがサンプルを・・・

サンプルページ

 

[使い方]
jQueryとjQuery.masonry.jsを読み込む
そして、これを。

=js=

$(function(){
    $('<!--並べるボックスを包んでいる要素のクラス・ID名-->').masonry();
})

このような感じに書いて、あとは中のボックスにfloatを指定。
幅や余白などは用途に合わせて指定してください。

これだけで、簡単、きれいに並ぶんですね。
すごいです。
「jQuery Masonry」
http://masonry.desandro.com/demos/basic-single-column.html

ただ、英語のサイトなので読み解くのがちょっと大変です・・。

Similar Posts:

Leave a Reply