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

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

jQuery Masonry

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

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

HTML

Components · Twitter Bootstrapより

js

Images | jQuery Masonryより

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

Twitter Bootstrap
jQuery Masonry

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

  1. はじめまして!

    BootstrapでWordPressのテーマを作ったのですが、thumbnailにpタグいれると、高さががたがたになっていたので、Masonryで解決する方法を探してこちらに来ました。いろいろ競合するかとおもったら、すんなりいけるんですね。
    解決しました。ありがとうございます。

    ただ、一度表示してからのブラウザ横幅変更には対応できないのが残念なのですが、これはしょうがいないですねぇ。

    1. はじめまして

      動きがスムーズにならないですよね、、少し大きめにブラウザをしたら元に戻ったりはするんですが。。。きっとそのうちbootstrapが対応するだろうなーと信じて放置してます><

コメントを残す