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

コメント

  1. はじめまして!

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

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

    • のぶ より:

      はじめまして

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

  2. Ken Inoue より:

    はじめまして。おかげで解決しました。ありがとうございました!

  3. Ken Inoue より:

    はじめまして。おかげで解決しました。ありがとうございました

  4. […] サンプルを基に簡単なCSSなどをいじって作りました。(現状で使用しているスクリプトだとパララックスの背景はスマホだと上手く動かないんですね…) 使ったものはstylebootstrap.info、スクロールスパイ、その他jqueryはnicescroll、masonry、lazyloader、等です。masonryをtwitterbootstrapで利用するのに少し手こずったのですがこちらの記事を参考に組めました。 […]

タイトルとURLをコピーしました