MasonryでPinterest風レイアウトを実装する

今更ですが、Pinterest風レイアウトの実装メモ。

基本的な実装

$(function() {
    $('#container').masonry({
        columnWidth: 200,
        itemSelector: '.item'
    });
});

ちょっと修正する

Masonryプラグインを読み込んで、上のコードで手軽に Pinterest 風レイアウトは実装できるが、もうちょいかっこよく表示したいので以下のように実装する。

HTML

描画が終わるまでローディングを表示したいので、ローディング用のdivを置き、#containerにグリッド幅計算用の.grid-sizerを用意する。ポイントは、#containerに直接.itemを置くのではなく、display:none;な#hidden-itemsに退避するところ。

<section role="main">

    <div class="loader"></div>

    <div id="container">
        <div class="grid-sizer"></div>
    </div>

    <div id="hidden-items">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        :
        :
    </div>

</section>

JavaScript

JavaScriptはだいたい同じだけれど、#hidden-itemsから.itemを取得して、#containerにappendするように実装を修正する。DOMにappendしてからMasonryでappendedして.itemを認識させないといけないのが二度手間ですが、この方法でしか実装できなかったので仕方ないっす。Masonryの後継版？のIsotopeはこのあたりが改善されている。

(function() {

    var $items = $('#hidden-items').find('.item'),
    $container = $('#container');

    if ( ! $container.length ) return;

    $container
        .masonry({
            itemSelector: '.item',
            isFitWidth: true,
            columnWidth: '.grid-sizer'
        })
        .append( $items )
        .masonry( 'appended', $items );

    $('.loader').hide();
}());

これでちょっとしたエフェクトが付くし、表示する.itemは非表示になっているので無駄なチラつきとかがなくなる。
描画が終わったら.loadingを非表示にすればOK。

モバイル用に最適化する

iPhoneなどのモバイル端末で見た時に、以下のようにグリッドの余白が空きすぎていてカッコ悪いので、グリッドサイズを調整する。

@media (max-width: 767px) {
    #container {
        width: 100% !important;
        .item, .grid-sizer {
            width: 100%;
            padding-left: 15px;
            padding-right: 15px;
            margin: 10px 0;
        }
    }
}

これでどんな画面サイズで表示しても、画面いっぱいにコンテンツが表示されるようになる。