Masonry.jsを使ってタイルビュー with Bootstrap

サムネサイズの違いを吸収するために、[なりたてQ作](http://blog.kosk.me/)の映画タイトル一覧をタイルビューにしてみたのでまとめ。

Before

before masonry

ダサいのは言わずもがな。

ライブラリ

タイルビューを実現するために、Masonry.jsとImagesLoadedを使用。

Masonry.jsとは

可変グリッドレイアウトを実現するJSライブラリ

Masonry - 公式

ImagesLoadedとは

画像の読み込みが完了したかどうか検知するJSライブラリ

ImagesLoaded - 公式

ソースコード

HTML

<div id="thumbnails">  
    <div class="thumb col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <div class="thumbnail">
        ...
        </div>
    </div>
    <div class="thumb col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <div class="thumbnail">
        ...
        </div>
    </div>
    ...
</div>  

タイル状に表示させたいカラム全体を、idなりclassなりで括っておく。今回の場合、div#thumbnailsがそれ。

また、個々のカラムに対するクラス(.thumb)指定は、col-*-*の指定が一つだけであれば、それをそのまま使ってしまって、特に指定の必要はないかなと。

jQuery

$(document).ready(function() {
    var $container = $('#thumbnails');
    $container.imagesLoaded(function() {
      $container.masonry({
        columnWidth: '.thumb',
        itemSelector: '.thumb'
      });
    });
  });

公式リファレンスを参考に。画像の読み込み完了をImagesLoadedで検知し、Masonryで整列させるようにしてます。

MasonryのoptionのcolumnWidthとitemSelectorは必須じゃないけど強く推奨ってことなので、指定しておくべし。それぞれ説明すると、

  • columnWidth: カラム幅(数値)もしくは、その基準となる要素名
  • itemSelector: 整列させたい要素名

つまり今回のコードで言うと、thumbnails内のthumb要素に対して、それらの幅を基準に整列させる、っていう感じ。

gutterというオプションを使って要素間の空間指定もできるようだけれど、使うと3カラムで表示させたいのに2カラムになる、という状態になってしまったので使えず。

ここまでやると

problem is padding of column

BootstrapのThumbnailsコンポーネントを使った場合、スタイル指定なしの状態でこうなる。

Thumbnailにmargin指定してないし、どうしてこんな隙間が・・・

って頭を悩ませていたら。あった、bootstrap.cssの中に。

/* bootstrap.css */
.col-*-* {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

カラムのpaddingだったのか!

というわけで、このスタイルを上書き。

CSS

.thumb {
    position: relative;
    min-height: 1px;
    padding: 5px;
}
.thumbnail {
    background: #FBFBFB;
    -webkit-box-shadow: 0 4px 6px -6px #777;
    -moz-box-shadow: 0 4px 6px -6px #777;
    box-shadow: 0 4px 6px -6px #777;
}

ついでに、うっすらbox-shadowをつけたりしてオサレ感を演出。

After

bootstrap with masonjs

見違えた!

kosk

へっぽこ