流式布局及动画
- 被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,正向排序
});
