レスポンシブ対応！Pinterestのように要素を詰めて表示することができるMasonry系スクリプト「Muuri」

Muuriは、Pinterest風のレイアウトを実現することができるMasonry系のスクリプトです。

表示や動きについては、デモページでご確認いただけます。

Muuriの使い方

Muuri・Velocity・Hammer.jsのダウンロードと設置

Muuriを利用するには、VelocityとHammer.jsも必要なので、それぞれGitHubからダウンロードします。

サーバーに設置したスクリプトをそれぞれ読み込みます。

<script src="velocity.js"></script>
<script src="hammer.js"></script>
<script src="muuri.js"></script>

要素のマークアップ

各要素は以下のようにマークアップします。

<div class="grid">
 
 <div class="item">
 <div class="item-content">
 This can be anything.
 </div>
 </div>
 
 <div class="item">
 <div class="item-content">
 <div class="my-custom-content">
 Yippee!
 </div>
 </div>
 </div>
 
</div>

gridで全体を内包し、各アイテムはitemクラスとitem-contentクラスで内包します。

CSSの追加

CSSには、以下をそのまま追加します。

.grid {
 position: relative;
}
.item {
 display: block;
 position: absolute;
 width: 100px;
 height: 100px;
 margin: 5px;
 z-index: 1;
}
.item.muuri-dragging,
.item.muuri-releasing {
 z-index: 2;
}
.item.muuri-hidden {
 z-index: 0;
}
.item-content {
 position: relative;
 width: 100%;
 height: 100%;
}

スクリプトの初期化

最後にスクリプトを初期化して実行させます。

<script>
var grid = new Muuri({
 container: document.getElementsByClassName('grid')[0],
 items: [].slice.call(document.getElementsByClassName('item'))
});
</script>

記述場所は、</body>の直前でOKです。

あとがき

レスポンシブにも対応していて、ブラウザの幅を縮めていくと、アニメーションしながら要素が移動していくのがいい感じですね。

なお、Muuriにはオプションも用意されています。詳しくはGitHubの説明をご参照ください。