流式布局及动画

• 被itemSelector选中的元素以及被filter过滤出的元素都会获得流式布局及动画

筛选

<div class="grid">
  <div class="color-shape small round red"></div>
  <div class="color-shape small round blue"></div>
  <div class="color-shape big round yellow"></div>
  <div class="color-shape small square red"></div>
</div>

var $grid = $('.grid').isotope({//指定父元素
  itemSelector: '.color-shape'//指定子元素
});

var $grid = $('.grid');
$grid.isotope({ filter : '.red.big'; });//对子元素进行过滤

var $grid = $('.grid');
$grid.isotope(
  filter: function() {
    return $(this).find('.number').text() > 20;//通过函数过滤,遍历并保留返回true的子元素
  }
)

排序

<div class="grid">
  <div class="element-item transition metal " data-category="transition">
    <h3 class="name">Mercury</h3>
    <p class="symbol">Hg</p>
    <p class="number">80</p>
    <p class="weight">200.59</p>
  </div>
  <div class="element-item metalloid " data-category="metalloid">
    <h3 class="name">Tellurium</h3>
    <p class="symbol">Te</p>
    <p class="number">52</p>
    <p class="weight">127.6</p>
  </div>
</div>

var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  getSortData: {
    name: '.name',
    symbol: '.symbol',
    number: '.number parseInt',
    category: '[data-category]',
    weight: function( itemElem ) {
      return parseFloat(weight)//浮点数的字符串需要转化为数字才能正常排序
    }
  }
});

$grid.isotope({
    sortBy: 'number',
    sortAscending: false //默认为true,正向排序
});