JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > Isotope-jQuery神奇的分类过滤和排序布局插件

Isotope-jQuery神奇的分类过滤和排序布局插件

Isotope是一款效果非常神奇的元素分类过滤和排序布局jQuery插件。Isotope是Masonry布局的作者David DeSandro的一款力作,该分类过滤和排序插件允许你以非常简单和炫酷的方式来隐藏和显示元素,以及对元素按照指定的规则进行排序。

查看演示

Isotope-jQuery神奇的分类过滤和排序布局插件.zip

安装

你可以通过Bower或npm来安装giantess分类过滤和排序插件。

  1. bower install isotope
  2. npm install isotope-layout   
复制代码
或者直接使用下载包中的isotope.pkgd.js文件及压缩版的isotope.pkgd.min.js。在页面中将它引入即可。

  1. <script src="/path/to/isotope.pkgd.min.js"></script>         
复制代码
版权信息

注意:Isotope不是完全免费的软件。用于商业用途时需要向作者购买。作为非商业用途使用时,在遵循 GPL v3 License 规范的前提下,你可以自由使用该插件。

使用方法

HTML结构

Isotope元素分类过滤和排序插件的HTML结构非常简单:使用一个包裹容器来包装一组用于分类过滤和排序的元素。

  1. <div id="container">
  2.   <div class="item">...</div>
  3.   <div class="item w2">...</div>
  4.   <div class="item">...</div>
  5.   ...
  6. </div>      
复制代码
CSS样式

用于分类过滤和排序的items需要你手动添加CSS样式:

  1. .item { width: 25%; }
  2. .item.w2 { width: 50%; }      
复制代码
初始化插件

可以通过jQuery来初始化一个Isotope实例:

  1. $('#container').isotope()        
复制代码
  1. var $container = $('#container');
  2. // init
  3. $container.isotope({
  4.   // options
  5.   itemSelector: '.item',
  6.   layoutMode: 'fitRows'
  7. });      
复制代码
imagesLoaded

如果在items中使用图片,而图片加载错误时Isotope的布局会发生错乱。解决这个问题的方法时使用imagesLoaded。imagesLoaded可以在所有的图片都被加载之后触发一个回调函数。

  1. // initialize Isotope after all images have loaded
  2. var $container = $('#container').imagesLoaded( function() {
  3.   $container.isotope({
  4.     // options
  5.   });
  6. });   
复制代码
  1. // or with vanilla JS
  2. var container = document.querySelector('#container');
  3. var iso;
  4. // initialize Isotope after all images have loaded
  5. imagesLoaded( container, function() {
  6.   iso = new Isotope( container, {
  7.     // options
  8.   });
  9. });   
复制代码
或者先初始化Isotope,然后在图片加载完成之后再设置布局:

  1. // initialize Isotope
  2. var $container = $('#container').isotope({
  3.   // options
  4. });
  5. // layout Isotope again after all images have loaded
  6. $container.imagesLoaded( function() {
  7.   $container.isotope('layout');
  8. });      
复制代码
  1. // or with vanilla JS
  2. // initialize Isotope
  3. var iso = new Isotope( container, {
  4.   // options
  5. });
  6. // layout Isotope again after all images have loaded
  7. imagesLoaded( container, function() {
  8.   iso.layout();
  9. });               
复制代码
Vanilla JavaScript

Isotope并不一定需要jQuery。你可以通过纯js来使用Isotope。
可以通过new Isotope( element, options )方法来初始化一个Isotope对象实例。Isotope构造器接收两个参数:一个容器元素和一个参数选项对象。

  1. var container = document.querySelector('#container');
  2. // init
  3. var iso = new Isotope( container, {
  4.   // options
  5.   itemSelector: '.item',
  6.   layoutMode: 'fitRows'
  7. });     
复制代码
容器元素可以是一个选择器字符串或一个单独的元素:

  1. var iso = new Isotope( '#container', {
  2.   // options
  3. });   
复制代码
使用HTML元素来初始化

你可以直接在html中初始化Isotope,不用任何的javascript。在容器元素上添加class js-isotope。参数可以通过一个data-isotope-options属性来给定。

  1. <div id="container" class="js-isotope"
  2.   data-isotope-options='{ "columnWidth": 200, "itemSelector": ".item" }'>            
复制代码
在HTML中设置的参数选项必须是可用的json格式数据,Keys需要双引号引起来,例如:"itemSelector":。注意:外部的HTML属性值使用单引号引起来,json使用双引号。

Isotope有大量的参数、方法及及事件,以及布局方式,请点击下面的链接查看详细的文档介绍。

Isotope在线文档

via:http://www.htmleaf.com/jQuery/Layout-Interface/201503171535.html

【Isotope-jQuery神奇的分类过滤和排序布局插件】相关文章

1. Isotope-jQuery神奇的分类过滤和排序布局插件

2. MixItUp:基于CSS3 & jQuery的过滤和排序插件

3. 基于CSS3 & jQuery的过滤和排序插件

4. MixItUp:基于CSS3 & jQuery的过滤和排序插件

5. 基于CSS3 & jQuery的过滤和排序插件

6. jQuery图片列表拖拽排序布局插件

7. Magic CSS3 – 创建各种神奇的交互动画效果

8. 神奇的HTML5:现在Chrome浏览器支持直接通过Gmail打开邮件链接

9. 响应式jQuery网格布局插件Grid-A-Licious

10. jQuery图片和HTML元素网格布局插件

本文来源:https://www.51html5.com/a1513.html

点击展开全部

﹝Isotope-jQuery神奇的分类过滤和排序布局插件﹞相关内容

其它栏目

也许您还喜欢