float をキチッと整列 jQuery Masonry

calendar

reload

【jQuery Masonry】をご存知でしょうか。
『NHKスタジオパーク』や、『アマナグループ|amanagroup INDEX』のサイトでも利用されている、jQueryプラグインです。当サイトでも利用しています。

ユーザーのウィンドウサイズに合わせて、要素がレンガ状にレイアウト変更する大変便利なプラグインです。

2009年にリリースされて以来何回かのバージョンアップをし現在に至っていますが、日本語での紹介が少ないので自分なりにまとめてみようと思います。

ダウンロード

まずはダウンロード。

1、jQuery

http://jquery.com/

2、jQuery Masonry

http://masonry.desandro.com/

基本的な使い方

1、Javascriptを読込む

まずは、javascript を読込みます。

2、HTML

HTMLは、[item(名前は任意)]を[#container(名前は任意)]で囲うように書きます。
[item]は、要素の分だけ入れます。

3、Javascript

columnWidthpaddingmargin を含めた[.item]の横幅です。
isAnimated は、可変時にアニメーションで移動させたい時に true を指定します。

以上が基本的な使い方になります。

オプションで他に色々設定もできますが、詳しくは本サイトをご確認ください。

■jQuery Masonry
http://masonry.desandro.com/