简介

Isotope.js 是一款前端响应式JS插件，可以动态实现布局排版、筛选、排序等功能。

使用

1.  引入 Isotope.js 文件

2.  HTML

<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>

3. 调用

// 全部
$('#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/

演示地址 ：https://www.jq22.com/yanshi3776