Isotope.js 是一款前端响应式JS插件,可以动态实现布局排版、筛选、排序等功能。
<div id="grid">
<div class="element-item transition metal">
<p class="number">80</p>
</div>
<div class="element-item post-transition metal">
<p class="number">89</p>
</div>
<div class="element-item alkali metal">
<p class="number">30</p>
</div>
<div class="element-item transition metal">
<p class="number">55</p>
</div>
</div>
// 全部
$('#grid').isotope({ filter: '*' });
// class 中包含 transition
$('#grid').isotope({ filter: '.transition' });
// class 中包含 metal
$('#grid').isotope({ filter: '.metal' });
// jQuery 代码过滤
$('#grid').isotope({
filter: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
}
})
官网 :https://isotope.metafizzy.co/
GitHub 地址 : https://github.com/metafizzy/isotope
演示地址 :https://www.jq22.com/yanshi3776