jQuery智能筛选布局排序插件Isotope的介绍
Isotope是一个优秀的jQuery插件能够对一组页面元素进行筛选、排序、并创建智能布局。利用这个插件，能够对任意给定的一组元素用显示/隐藏效果进行过滤并且可以用花俏的动画进行重新排序。这个插件的布局功能非常强大，利用一个简单的功能，元素集将被转换成水平或垂直布局或智能地分布在一个网格中，在布局时都会伴随有漂亮的动画效果。
在很多的作品展示主题中都可以看到作品筛选功能，效果太炫，功能也较实用，所以在更新Purity主题2.0版本是也添加了此功能。萨龙网络作品展示只是使用了Isotope筛选功能，布局功能搭配Infinite Scroll插件更是能自由的实现瀑布流的效果，Isotope功能还包括组合过滤、重新布局、添加元素等实用的功能。
Isotope的安装
首页我们在Isotope官网上下载js文件，将isotope.pkgd.min.js放在项目的js文件夹下。
引入js文件
- <script src="/path/to/isotope.pkgd.min.js"></script>
HTML代码
- <div class="grid">
- <div class="grid-item">...</div>
- <div class="grid-item grid-item--width2">...</div>
- <div class="grid-item">...</div>
- ...
- </div>
CSS代码
- .grid-item { width: 25%; }
- .grid-item--width2 { width: 50%; }
JS代码
- var elem = document.querySelector('.grid');
- var iso = new Isotope( elem, {
-
- itemSelector: '.grid-item',
- layoutMode: 'fitRows'
- });
- var iso = new Isotope( '.grid', {
-
- });
[scbutton link="http://www.5icool.org/demo/2011/a00472/index.html" target="blank" variation="blue"]Isotope效果演示[/scbutton][statusbox]这些代码只是官网上的一个入门指南，而实际工作当中还是需要做很多的修改，下一篇文章将实战介绍如何将Isotope插件集成到Wordpress主题中。[/statusbox]本文原创，作者：萨龙龙，其版权均为萨龙网络所有。
如需转载，请注明出处：https://salongweb.com/isotope.html
一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！在很多网页上，尤其是一些科技企业的产品展示页面，当你滚动页面的时候会看到各式各样的元素动画效果，非常的炫丽，很吸引人。WOW.js就是一款帮助你…ajax加载更多内容相当普遍了，萨龙龙在开发主题的过程中找了很多方法都不尽完美，jQuery.ias插件是相对完美的一款。
ias全称是I…开发一个WordPress文章筛选功能时，因为选项较多，默认只显示一行，可通过更多与关闭按钮来切换内容，使用到强大实用且轻巧的jQuery…简介
Boxer是一款基于jQuery的Lightbox效果插件，可用于显示图片、视频、iframe和其他内容，和其他Lightbo…上一篇文章我们介绍了Isotope，功能强大，效果出众的jQuery插件，但是文章中的代码并不能使用在项目中，所以今天通过Wordpress主题…fancyBox3是一款优秀的弹出框Jquery插件，之前使用过很多LightBOX弹窗插件，功能都很强大，fancyBox3相对来说，…
