大理高端网站建设|网站托管|极速建站|WordPress主题设计开发

jQuery智能筛选布局排序插件Isotope的介绍

2016-01-04 1777次

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

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

Isotope的安装

首页我们在Isotope官网上下载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. // element argument can be a selector string
  8. //   for an individual element
  9. var iso = new Isotope( '.grid', {
  10.   // options
  11. });

Isotope效果演示

这些代码只是官网上的一个入门指南,而实际工作当中还是需要做很多的修改,下一篇文章将实战介绍如何将Isotope插件集成到Wordpress主题中。