Twitter Bootstrap 2.0でjQuery Masonryを使ってレンガ状に画像を並べる方法

Twitter Bootstrap 2.0でjQuery Masonryを使ってレンガ状に画像を並べる方法

jQuery Masonry

jQuery Masonryはレンガ状にFloatしたbox要素を敷き詰めてくれるjQueryのプラグインです
テキスト要素だけだと読み込むだけで勝手にレンガ状になったのですが画像が含まれているとうまく行きませんでした

サイトをよく見たら書いてあったんですが、解決に時間がかかったのでメモを残しておきます

HTML

~~~

  • Thumbnail label

    Thumbnail caption right here…

~~~
Components · Twitter Bootstrapより

js

~~~

~~~
Images | jQuery Masonryより

これだけで簡単にPinterest / Home 風デザインの出来上がり (/∇\*)
マニュアルがあるけど分かりにくいので誰かの参考になるといいな〜

Twitter Bootstrap
jQuery Masonry