Introduction

Muuriは、ありとあらゆるレイアウトを構築することができ、 その上、レスポンシブで、ソートやフィルタ、要素のドラッグ、アニメーションも使える、 まさに魔法のようなレイアウトエンジンです。 言うならば、Packeryと、 Masonry、 Isotope、 Sortableを合体させたライブラリです。 どんなものか見てみたいですか？ それならデモをチェックしてください。

Muuriはデフォルトでは、ビンパッキングレイアウトアルゴリズムに Packeryや、 Masonryと同様、 "First Fitアルゴリズム"を使っています。 実装は、Jukka JylankiがA Thousand Ways to Pack the Binで述べたように、 "maxrects"に基づいています。 もし気に入らないなら、独自のレイアウトアルゴリズムを定義して好きなように配置することができます。

Muuriは内部のアニメーションエンジンであるWeb Animations APIと、 Hammer.jsを使ってドラッグを処理しています。 ちなみに、ライブラリ名である"muuri"は、フィンランド語で"壁"という意味です。

Muuriの特徴

• カスタマイズ可能なレイアウト
• ドラッグ&ドロップ(グリッド間もOK)
• グリッドの入れ子
• 高速アニメーション
• フィルタリング可能
• ソート可能