Masonry系の最強スクリプト、レスポンシブ対応のレイアウトが簡単に実装できる -Muuri

カードやパネルをレンガ状に配置し、ドラッグして配置をアニメーションで変更、ソートやフィルタリング機能も可能なグリッドレイアウトが簡単に実装できるスクリプトを紹介します。

マウスで操作しても、タッチデバイスで操作しても、非常に快適です。

デモのキャプチャ

Muuri
Muuri -GitHub

Muuriのデモ

デモはモダンブラウザ、IE9+でご覧ください。スマホやタブレットでも動作します。
※スマホだと各パネルが大きいので、操作しにくいかも。

デモのキャプチャ

デモページ

各パネルをドラッグすると、アニメーションで配置を変更するだけでなく、ソートやフィルタリング機能も備わっています。

デモのキャプチャ

機能は上部のセレクトフォーム

カラーでソートしてみました。

デモのキャプチャ

ソート機能: カラー

面白い機能として、レイアウト方法を変更することもできます。

デモのキャプチャ

通常は左・上を基準にパネルを順番に配置しますが、隙間がでないことを優先にさせたり、右や下を基準にすることもできます。

デモのキャプチャ

右・下を基準に配置

Muuriの使い方

Step 1: 外部ファイル

当スクリプトとVelocityHamemr.jsの3つを外部ファイルとして記述します。

Step 2: HTML

グリッドはdiv要素で実装し、1つのグリッドに対して最低2つ以上のアイテムが必要です。アイテムが入れ子になっているのは、外側はアイテムを配置するため、内側はアニメーションのため、となっています。

Step 3: CSS

グリッドを構成する基本となるスタイルシートです。
基本的には変更する必要はありませんが、各パネルの隙間を調整したい場合は.itemのmargin値を変更します。

Step 4: JavaScript

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

オプションなど、さらに詳しい情報は下記をご覧ください。

top of page

©2017 coliss