[![jQuery智能筛选布局排序插件Isotope的介绍](https://pic.salongweb.com/2015/12/Isotope.jpg)](https://pic.salongweb.com/2015/12/Isotope.jpg "jQuery智能筛选布局排序插件Isotope的介绍")Isotope是一个优秀的jQuery插件能够对一组页面元素进行筛选、排序、并创建智能布局。利用这个插件，能够对任意给定的一组元素用显示/隐藏效果进行过滤并且可以用花俏的动画进行重新排序。这个插件的布局功能非常强大，利用一个简单的功能，元素集将被转换成水平或垂直布局或智能地分布在一个网格中，在布局时都会伴随有漂亮的动画效果。

在很多的作品展示主题中都可以看到作品筛选功能，效果太炫，功能也较实用，所以在更新Purity主题2.0版本是也添加了此功能。萨龙网络作品展示只是使用了Isotope筛选功能，布局功能搭配Infinite Scroll插件更是能自由的实现瀑布流的效果，Isotope功能还包括组合过滤、重新布局、添加元素等实用的功能。

## Isotope的安装

首页我们在[Isotope官网](http://isotope.metafizzy.co/)上下载js文件，将isotope.pkgd.min.js放在项目的js文件夹下。

### 引入js文件

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

### HTML代码

1. <div class=“grid”>
2. <div class=“grid-item”>…</div>
3. <div class=“grid-item grid-item–width2”>…</div>
4. <div class=“grid-item”>…</div>
5. …
6. </div>

### CSS代码

1. .grid-item { width: 25%; }
2. .grid-item–width2 { width: 50%; }

### JS代码

1. var elem = document.querySelector(‘.grid’);
2. var iso = new Isotope( elem, {
3. // options
4. itemSelector: ‘.grid-item’,
5. layoutMode: ‘fitRows’
6. });
7. 
8. // element argument can be a selector string
9. // for an individual element
10. var iso = new Isotope( ‘.grid’, {
11. // options
12. });

\[scbutton link=”http://www.5icool.org/demo/2011/a00472/index.html” target=”blank” variation=”blue”\]Isotope效果演示\[/scbutton\]\[statusbox\]这些代码只是官网上的一个入门指南，而实际工作当中还是需要做很多的修改，下一篇文章将实战介绍如何将Isotope插件集成到Wordpress主题中。\[/statusbox\]