Twitter Bootstrap 2.0でjQuery Masonryを使ってレンガ状に画像を並べる方法
jQuery Masonryはレンガ状にFloatしたbox要素を敷き詰めてくれるjQueryのプラグインです
テキスト要素だけだと読み込むだけで勝手にレンガ状になったのですが画像が含まれているとうまく行きませんでした
サイトをよく見たら書いてあったんですが、解決に時間がかかったのでメモを残しておきます
HTML
~~~
-
Thumbnail label
Thumbnail caption right here…
…
~~~
Components · Twitter Bootstrapより
js
~~~
~~~
Images | jQuery Masonryより
これだけで簡単にPinterest / Home 風デザインの出来上がり (/∇＼*)
マニュアルがあるけど分かりにくいので誰かの参考になるといいな〜
コメント(4)
はじめまして！
BootstrapでWordPressのテーマを作ったのですが、thumbnailにpタグいれると、高さががたがたになっていたので、Masonryで解決する方法を探してこちらに来ました。いろいろ競合するかとおもったら、すんなりいけるんですね。
解決しました。ありがとうございます。
ただ、一度表示してからのブラウザ横幅変更には対応できないのが残念なのですが、これはしょうがいないですねぇ。
はじめまして
動きがスムーズにならないですよね、、少し大きめにブラウザをしたら元に戻ったりはするんですが。。。きっとそのうちbootstrapが対応するだろうなーと信じて放置してます＞＜
はじめまして。おかげで解決しました。ありがとうございました
はじめまして。おかげで解決しました。ありがとうございました！