建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS响应式动态布局插件Isotope.js

来源:易助科技网浏览量:52收藏

简介


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


JS响应式动态布局插件Isotope.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/

GitHub 地址 :  https://github.com/metafizzy/isotope

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