グリッドレイアウト JS ライブラリ「Muuri」の使い方まとめ（設定オプション一覧あり）

MIT ライセンスのレイアウト JS ライブラリ「Murri」の日本語の解説記事が（ほぼ）無かったので備忘録がてら書いておきます。

• ドキュメント
• GitHub リポジトリ

インストール

<script src="https://cdn.jsdelivr.net/npm/muuri@0.9.5/dist/muuri.min.js"></script>

<!-- アニメーションを使用する場合 -->
<script src="https://cdn.jsdelivr.net/npm/web-animations-js@2.3.2/web-animations.min.js"></script>

または npm install muuri

使う

要素を作成

<div class="grid">
  <div class="item">
    <div class="item-content">
      <!-- ここに何でも書いてね -->
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <!-- ここに何でも書いてね -->
    </div>
  </div>
</div>

CSS

こちらがドキュメントに記載されていますが、完全でなくても大丈夫みたいです。

.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%;
}

JS

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

オプションを指定する場合：

var grid = new Muuri(elem, {
  optionName: value,
  optionName2: value2,
  optionName3: value3,
  optionName4: value4
});

オプション

オプション名	説明	形式	既定値
showDuration	表示するアニメーションの継続時間（ミリ秒） 無効: 0	数値	300
showEasing	表示するアニメーションの種類	文字列	ease
hideDuration	非表示にするアニメーションの継続時間（ミリ秒） 無効: 0	数値	300
hideEasing	非表示にするアニメーションの種類	文字列	ease
layout	レイアウト設定 ・fillGaps：順番が変わってでも前が空いていたら詰める ・horizontal：水平モード（横にスクロールするページ用） ・alignRight：アイテムを右から並べる ・alignBottom：アイテムを下から並べる	オブジェクト	{ fillGaps: false, horizontal: false, alignRight: false, alignBottom: false, rounding: false }
layoutOnResize	ウィンドウサイズを変更したときに、もう一度整列するかどうか。数字にすると、変更されてから設定した時間（ミリ秒）経ったあとに整列	数値、ブール値(true/false)	150
dragEnabled	ドラッグして並べ替えられるようにする	ブール値(true/false)	false
dragContainer	ドラッグされたアイテムが追加される要素	要素、n​​ull	null
dragHandle	ドラッグ時の持ち手の CSS セクター（.handleなど）	文字列、null	null

他にも沢山あります。ドキュメントを参照してみてください。

参考

• https://docs.muuri.dev/