add()

grid.add( elements, [options] )

インスタンスに追加する要素を渡して新しいアイテムを追加し、 必要に応じて追加するアイテムのインデックスを指定します。 コンテナ要素の子要素ではない全て要素は、 自動的にコンテナ要素に追加されます。 もしCSSのdisplayにnoneを指定している要素の場合、 非アクティブ(非表示)として指定されます。 アイテムが非アクティブである限り、 レイアウトの一部にはなりませんが、インデックスは保持します。grid.show()メソッドを使うことで、アイテムをいつでもアクティブにすることができます。 1つ以上の要素が表示されている場合、 このメソッドは自動的にgrid.layout()メソッドを呼び出します。 非表示のアイテムのみが追加された場合は、grid.layout()メソッドは呼び出されません。 全ての新しい表示アイテムは、 初期レイアウト時にアニメーション無しで配置されます。

パラメータ

elements: array, element

DOM要素の配列。

options.index: number

• 初期値 : -1
• 追加するアイテムのインデックス。 値が-1の場合は、リストの末尾に追加されます。 値が0の場合は、リストの先頭に追加されます。 DOM要素は、インデックスの値に関わらず、 インスタンスコンテナに追加されることに注意してください。grid.synchronize()メソッドを使うと、 DOM要素とアイテムを同じ順序に並べ替えることができます。 オプションです。

options.layout: boolean, function, string

• 初期値 : true
• デフォルトでは、このメソッドの最後にgrid.layout()メソッドが呼び出されます。 この引数を指定すると、grid.layout()メソッドの呼び出しを制御することができます。grid.layout()メソッドを完全に無効にするには、falseを指定します。 また、grid.layout()メソッドのコールバックを指定することもできます。 さらに、'instant'を指定すると、 アニメーション無しで、すぐにgrid.layout()メソッドが実行されます。 オプションです。

戻り値

array

追加したアイテムを返します。

// 新規アイテムを末尾に追加します。
grid.add([elemA, elemB]);

// 2つの新規アイテムを先頭に追加します。
grid.add([elemA, elemB], {index: 0});

// 自動レイアウトをスキップします。
grid.add([elemA, elemB], {layout: false});

デモ

アイテム4(DOMから取得)とアイテム5(JavaScriptで生成)を追加します。

JavaScript

var grid = new Muuri('.grid');
var _item = document.createElement('div');
_item.innerHTML = '' +
    '<div class="item">' +
      '<div class="item-content">' +
        'アイテム5' +
      '</div>' +
    '</div>';
 
var elem4 = document.getElementById('item4'),
    elem5 = _item.firstChild;
grid.add([elem4, elem5]);

HTML

<div class="grid">
  <div class="item">
    <div class="item-content">アイテム1</div>
  </div>
  <div class="item">
    <div class="item-content">アイテム2</div>
  </div>
  <div class="item">
    <div class="item-content">アイテム3</div>
  </div>
</div>
<div class="item" id="item4">
  <div class="item-content">アイテム4</div>
</div>

CSS

.grid {
  position: relative;
}

.item {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 5px;
  z-index: 1;
  color: #000;
  border: 1px solid #000;
}

.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}