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
ただ、英語のサイトなので読み解くのがちょっと大変です・・。