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

#javascript, #masonry

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

基本的な実装

1
2
3
4
5
6
$(function() {
$('#container').masonry({
columnWidth: 200,
itemSelector: '.item'
});
});

ちょっと修正する

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

HTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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はこのあたりが改善されている。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(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などのモバイル端末で見た時に、以下のようにグリッドの余白が空きすぎていてカッコ悪いので、グリッドサイズを調整する。

Masonry

1
2
3
4
5
6
7
8
9
10
11
@media (max-width: 767px) {
#container {
width: 100% !important;
.item, .grid-sizer {
width: 100%;
padding-left: 15px;
padding-right: 15px;
margin: 10px 0;
}
}
}

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