Isotope.js超好看前端响应式JS插件,动态实现瀑布流布局排版、筛选、排序等功能

admin

Isotope

插件简介

Isotope是一款效果非常神奇的元素分类过滤和排序布局JQuery插件。Isotope是Masonry布局的作者David DeSandro的一款力作,该JQuery插件能够对一组页面元素进行筛选、排序、并创建智能布局。利用这个插件,能够对任意给定的一组元素用显示/隐藏效果进行过滤并且可以用花俏的动画进行重新排序。这个插件的布局功能非常强大,利用一个简单的功能,元素集将被转换成水平或垂直布局或智能地分布在一个网格中,在布局时都会伴随有漂亮的动画效果。在很多的作品展示主题中都可以看到作品筛选功能,效果太炫,功能也较实用,所以在更新Purity主题2.0版本是也添加了此功能。作品展示只是使用了Isotope筛选功能,布局功能搭配Infinite Scroll插件更是能自由的实现瀑布流的效果,Isotope功能还包括组合过滤、重新布局、添加元素等实用的功能。

插件安装

我们可以在Isotope官网上下载js文件,将isotope.pkgd.min.js放在项目的js文件夹下。

<script src=“/path/to/isotope.pkgd.min.js”></script>

当然也可以引入CDN加速静态文件

//未压缩版
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
 
<!-- or -->

//压缩版
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

Isotope官网

Isotope官网地址:https://isotope.metafizzy.co/


Isotope官网示例:https://isotope.metafizzy.co/filtering.HTML


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

示例JavaScript

// 全部
$('#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;
  }
})
文章版权声明:除非注明,否则均为十八码原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,851人围观)

还没有评论,来说两句吧...

目录[+]