Isotope进行筛选、排序、布局动画

流式布局及动画

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

筛选

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的子元素
  }
)

排序

  

    
Mercury
    
Hg
    
80
    
200.59
  
  

    
Tellurium
    
Te
    
52
    
127.6
  

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,正向排序
});