可変グリッドプラグインjQuery masonryの設定方法・オプションまとめ

2012年7月6日 jQuery NAndo
jQuery masonryの設定方法・オプションまとめ

CSSのfloat:leftなどで要素を横並びさせたい時、高さが違う要素が含まれるとなんだかキレイに並びません。
そこで役立つ便利なプラグインjQuery masonryをまとめてみました。
ちなみにMasonryとは、和訳すると「石造建築
レンガ造りの壁とかをイメージしてもらえると分かりやすいのかな?

jQuery masonryの使い方

JSファイルをダウンロード

まずはjQuery本体とjQuery masonry本体をDL。

jQuery
jQuery masonry

jsファイルを読み込み

headタグ内に、DLしたJSファイルの読み込みを記述します。

続けて、/bodyの直前に下記jsを記述します。

HTML

並び変えしたい要素を記述。

CSS

各ブロック要素をデザインする。

JS

※大事なことなので2回言います。

masonry サンプルページ

実にシンプルな作りだけど、ウィンドウサイズに合わせて要素が並び変わる動きができた。

jQuery masonry のオプション

オプションを加えると、ぬるっと動いたり色々できてかっこよくなるので、いくつか紹介。

オプション設定

itemSelectorオプションは必須。
個人的には、columnWidthfitWidthを設定しておけば、良い感じになってくれると思うわけです。

masonry サンプルページ2

まとめ

ひと通り、ソースのコピペで実装可能に紹介しましたがいかがでしょうか。

レスポンシブデザインに対応しているので、記事一覧ページなどにもおすすめです。

この他にもたくさんオプションが存在しますが、本家サイトを参照してみて下さい。