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

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

レスポンシブ対応!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の説明をご参照ください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。