サムネイル画像の整列表示にjQuery Masonry

Read More

jQueryを使った、ちょっと変わったサムネイル画像の表示方法。


デモを見れば説明不要かと。
■デモページ
http://xirasaya.com/demo/1/


■必要なものは以下の2点
jquery.masonry.js
jquery-1.6.1.min.js


以下のサイトからそれぞれダウンロードできる
■jQuery Masonry : Download
http://masonry.desandro.com/

■jQuery : Download
http://jquery.com/


ここでは使い方の説明はしない。
つーかデモソース見た方が早い。


キモは、
内側の各ブロックを覆っている大外の要素に対してoverflow:auto;を指定することと、内側のブロックをfloat:left;しておくこと。


なお、デモではjQuery Masonryからダウンロードしたjquery.masonry.jsとは違うjsファイルを使用している。

この為、オプションの指定が本家のそれとは違うかもしれない点に注意すること。




普通にfloatを使ったものとは見た目も挙動も違うので、変わり種の提案として使えるかも知れない。