layout

アイテムのレイアウトを定義します。 このページでは(全く)記載していませんが、 独自のレイアウトアルゴリズムを指定したい場合に、関数を渡すこともできます。 (ソースとともにあらんことを)

• 初期値 : {fillGaps: false, horizontal: false, alignRight: false, alignBottom: false}
• 値 : function、object

デフォルトのレイアウトアルゴリズムを設定するオプションは以下のとおりです。

fillGaps: boolean

• 初期値 : false
• trueを指定した場合、 アルゴリズムは全てのアイテムを順番に確認し、 各アイテムを配置可能な最初のスロットに配置します。 これは、前の要素のスロットよりも前に、空きスロットがあったとしても同様です。 実際には、視覚的にアイテムが順序よく並ばない可能性がありますが、 グリッドの隙間は少なくなります。 このオプションのデフォルトはfalseです。 基本的に、レイアウトを計算する時には、常に以下の条件が適用されます。 (alignRightとalignBottomがfalseであることを前提とします。)
  nextItem.top > prevItem.top || (nextItem.top === prevItem.top && nextItem.left > prevItem.left)
  これはアイテムが視覚的に順番に表示されていることを表します。

horizontal: boolean

• 初期値 : false
• trueを指定した場合、 グリッドはランドスケープモード(横長のモード)になります。 (グリッドが右に拡がります) 水平スクロールのサイトで使用します。 falseの場合、ポートレートモードになり、下方向へ拡がります。

alignRight: boolean

• 初期値 : false
• trueの場合、アイテムが右から左に並べられます。

alignBottom: boolean

• 初期値 : false
• trueの場合、アイテムが下から上に並べられます。

rounding: boolean

• 初期値 : true
• trueのを指定した場合、 レイアウト計算時にMath.round()を使って、 自動でアイテムサイズを丸めます。 正しいサイズを使うにはfalseを指定します。 実際には、アイテムに相対的なサイズ(%、em、rem等)を指定している場合は、 falseにする必要があります。 アイテムサイズにpxを指定している場合、 trueのままが良いでしょう。

var grid = new Muuri(elem, {
  layout: {
    fillGaps: true,
    horizontal: true,
    alignRight: true,
    alignBottom: true,
    rounding: false
  }
});

デモ

設定に従ってアイテムをレイアウトしています。

JavaScript

var grid = new Muuri('.grid', {
  layout: {
    fillGaps: true,
    horizontal: false,
    alignRight: true,
    alignBottom: true,
    rounding: false
  }
});

HTML

<div class="grid">
  <div class="item no1">
    <div class="item-content">アイテム1</div>
  </div>
  <div class="item no2">
    <div class="item-content">アイテム2</div>
  </div>
  <div class="item no3">
    <div class="item-content">アイテム3</div>
  </div>
  <div class="item no4">
    <div class="item-content">アイテム4</div>
  </div>
  <div class="item no5">
    <div class="item-content">アイテム5</div>
  </div>
  <div class="item no6">
    <div class="item-content">アイテム6</div>
  </div>
</div>

CSS

.grid {
  position: relative;
  width: 15em;
}

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

.no1 {
  width: 8em;
  height: 8em;
}

.no2 {
  width: 5em;
  height: 3em;
}

.no3 {
  width: 4em;
  height: 6em;
}

.no4 {
  width: 2em;
  height: 8em;
}

.no5 {
  width: 7em;
  height: 4em;
}

.no6 {
  width: 10em;
  height: 3em;
}

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