Muuri - にほんご。

sort()

grid.sort( comparer, [options] )

アイテムをソートします。ソートは3つの方法があります。 1つめは、単純にネイティブの配列ソートと同様の動作をする関数を渡す方法です。 唯一の違いは、ソートが常に安定している点です。 2つめは、インスタンスのオプションで指定したsortDataを使ってソートする方法です。sortDataのキーを(スペースで区切って)渡すだけで、 指定されたソートデータに基いてソートされます。 3つめは、内部のアイテム配列を同じ順序で同期するために使われる、 あらかじめソートしたアイテムの配列を渡す方法です。


パラメータ

comparer : array, function, string
比較関数、sortDataのキー(スペース区切り)、あらかじめソートされたアイテム配列を指定することができます。 sortDataをキャッシュしてソートを高速化することができるで、 sortDataを使った方法をお勧めします。
options.descending : boolean
  • 初期値 : false
  • デフォルトではアイテムは昇順ソートされます。 降順ソートしたい場合はtureを指定してください。 オプションです。
options.layout : boolean, function, string
  • 初期値 : true
  • デフォルトでは、このメソッドの最後にgrid.layout()メソッドが呼び出されます。 この引数を指定すると、grid.layout()メソッドの呼び出しを制御することができます。grid.layout()メソッドを完全に無効にするには、falseを指定します。 また、grid.layout()メソッドのコールバックを指定することもできます。 さらに、'instant'を指定すると、 アニメーション無しで、すぐにgrid.layout()メソッドが実行されます。 オプションです。

戻り値

無し

※ソース上はインスタンスを返しています。


// "data-id"属性の値でアイテムをソート(昇順)します。
grid.sort(function (itemA, itemB) {
  var aId = parseInt(itemA.getElement().getAttribute('data-id'));
  var bId = parseInt(itemB.getElement().getAttribute('data-id'));
  return aId - bId;
});
 
// あらかじめソートされたアイテム配列を使ってソートします。
grid.sort(presortedItems);
 
// sortDataのキーを指定してソート(昇順)します。
grid.sort('foo bar');
 
// sortDataのキーを指定してソート(降順)します。
grid.sort('foo bar', {descending: true});
 
// sortDataのキーを指定してソートします。
// いくつかのキーは昇順、またいくつかのキーを降順で指定します。
grid.sort('foo bar:desc');

デモ

data-fooを昇順、data-barを降順でソートしています。

foo:1、bar:"a"
foo:3、bar:"c"
foo:2、bar:"e"
foo:6、bar:"F"
foo:2、bar:"D"
foo:4、bar:"B"

JavaScript

var grid = new Muuri('.grid', {
  sortData: {
    foo: function (item, element) {
      return parseFloat(element.getAttribute('data-foo'));
    },
    bar: function (item, element) {
      return element.getAttribute('data-bar').toUpperCase();
    }
  }
});
grid.sort('foo bar:desc');

HTML

<div class="grid">
  <div class="item no1" data-foo="1" data-bar="a">
    <div class="item-content">
      foo:1、bar:"a"
    </div>
  </div>
  <div class="item no2" data-foo="3" data-bar="c">
    <div class="item-content">
      foo:3、bar:"c"
    </div>
  </div>
  <div class="item no3" data-foo="2" data-bar="e">
    <div class="item-content">
      foo:2、bar:"e"
    </div>
  </div>
  <div class="item no4" data-foo="6" data-bar="F">
    <div class="item-content">
      foo:6、bar:"F"
    </div>
  </div>
  <div class="item no5" data-foo="2" data-bar="D">
    <div class="item-content">
      foo:2、bar:"D"
    </div>
  </div>
  <div class="item no6" data-foo="4" data-bar="B">
    <div class="item-content">
      foo:4、bar:"B"
    </div>
  </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;
}
 
.no1 {
  width: 60%;
  height: 100px;
}
 
.no2 {
  width: 30%;
  height: 100px;
}
 
.no3 {
  width: 30%;
  height: 100px;
}
 
.no4 {
  width: 25%;
  height: 100px;
}
 
.no5 {
  width: 40%;
  height: 100px;
}
 
.no6 {
  width: 35%;
  height: 100px;
}
 
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

© 2015 Haltu Oy. Licensed under the MIT license

このコンテンツはHaltuによるMuuriドキュメントを翻訳/改変したものです。