Getting Started

1. Muuriを取得

GitHubからダウンロードします。

• muuri.js - 開発用(最小化しておらず、コメントが含まれています。)
• muuri.min.js - 本番用(最小化してあり、コメントもありません)

または、CDNから取得します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.3/muuri.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.3/muuri.min.js"></script>

npmでインストールすることもできます。

$ npm install muuri

bowerからもインストール可能です。

$ bower install muuri

2. 関連ライブラリを取得

• Muuriではアニメーションを処理するために、Web Animations APIを使っています。 もしWeb Animations APIをサポートしていないブラウザでMuuriを使う場合、polyfillを導入する必要があります。 あなたがツイてるなら、 Muuri.ItemAnimateコンストラクタを上書することで、 Muuriのデフォルトアニメーションエンジンを独自実装に変更できることが分かるでしょう。
• Muuriは全てのドラッグイベントにHammer.js(v2.0.0以上)を使っています。 これはオプションに依存しており、ドラッグイベントが有効な場合に限り必要です。 現在、ドラッグイベントを、別ライブラリを使って処理する簡単な方法はありません。 ほぼ全てのドラッグ関連のロジックはMuuri.ItemDragコンストラクタ内にあり、 それぞれがインスタンス化されます。 もし、オプションで設定可能な範囲を超えて、ドラッグのカスタマイズする必要がある場合、 Muuri.ItemDragコンストラクタを独自の実装に変更することができます。(幸運を祈ります。)

3. srciptタグ追加

サイトにMuuriと、その直前に関連ライブラリを挿入してください。

<script src="web-animations.min.js"></script>
<script src="hammer.min.js"></script>
<script src="muuri.min.js"></script>

4. HTML生成

• 全てのグリッドにはコンテナ要素が必要です。
• グリッドアイテムは、少なくとも2つの要素で構成する必要があります。 外側の要素は、要素位置の指定に使用し、 内側の要素(直接の子要素)は、要素の可視状態のアニメーションを処理(show/hideメソッド)するために使用します。 内側の要素には、任意の要素を挿入することができます。

HTML

<div class="grid">
 
  <div class="item">
    <div class="item-content">
      <!-- 独自の要素を挿入する範囲 -->
      任意の要素を挿入することができます。
      <!-- 挿入範囲はここまで -->
    </div>
  </div>
 
  <div class="item">
    <div class="item-content">
      <!-- 独自の要素を挿入する範囲 -->
      任意の要素を挿入することができます。
      <div class="my-custom-content">
        わーい！
      </div>
      <!-- 挿入範囲はここまで -->
    </div>
  </div>
 
</div>

5. CSS設定

• コンテナ要素は「positioned」されている必要があります。 つまり、CSSのpositoinプロパティに、 relative、absolute、fixedを指定するということです。 またMuuriは、コンテナ要素の幅/高さを、 要素がカバーする範囲や、レイアウトアルゴリズムの設定によって自動的にリサイズします。
• アイテム要素のCSSのpositionプロパティにはabsolute、 displayプロパティにはblockが指定されている必要があります。 実際Muuriは、アイテム要素にインラインで強制的にdisplay: block;を設定します。
• アイテム要素にはCSSのtransitionや、アニメーションを設定してはいけません。 これは、Muuri内部のアニメーションエンジンと競合する可能性があるためです。 しかし、レイアウトの操作後にサイズが変更された際にアニメーションさせたい場合は、 コンテナ要素にtransitionを指定することができます。
• アイテム間の隙間を調整するには、アイテムに対してmarginを指定します。

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

6. 実行

実行にあたり、最小構成は以下の通りです。 必ずコンテナ要素(またはMuuriが要素を取得できるセレクタ)を指定しなければなりません。 それ以外は全てオプションです。

var grid = new Muuri('.grid');

このチュートリアルのデモはこちらで見ることができます。 他のデモも見たい場合はこちら。