Isotope-jQuery神奇的分类过滤和排序布局插件
Isotope是一款效果非常神奇的元素分类过滤和排序布局jQuery插件。Isotope是Masonry布局的作者David DeSandro的一款力作,该分类过滤和排序插件允许你以非常简单和炫酷的方式来隐藏和显示元素,以及对元素按照指定的规则进行排序。
你可以通过Bower或npm来安装giantess分类过滤和排序插件。
或者直接使用下载包中的isotope.pkgd.js文件及压缩版的isotope.pkgd.min.js。在页面中将它引入即可。
版权信息
注意:Isotope不是完全免费的软件。用于商业用途时需要向作者购买。作为非商业用途使用时,在遵循 GPL v3 License 规范的前提下,你可以自由使用该插件。
使用方法
HTML结构
Isotope元素分类过滤和排序插件的HTML结构非常简单:使用一个包裹容器来包装一组用于分类过滤和排序的元素。
CSS样式
用于分类过滤和排序的items需要你手动添加CSS样式:
初始化插件
可以通过jQuery来初始化一个Isotope实例:
imagesLoaded
如果在items中使用图片,而图片加载错误时Isotope的布局会发生错乱。解决这个问题的方法时使用imagesLoaded。imagesLoaded可以在所有的图片都被加载之后触发一个回调函数。
或者先初始化Isotope,然后在图片加载完成之后再设置布局:
Vanilla JavaScript
Isotope并不一定需要jQuery。你可以通过纯js来使用Isotope。
可以通过new Isotope( element, options )方法来初始化一个Isotope对象实例。Isotope构造器接收两个参数:一个容器元素和一个参数选项对象。
容器元素可以是一个选择器字符串或一个单独的元素:
使用HTML元素来初始化
你可以直接在html中初始化Isotope,不用任何的javascript。在容器元素上添加class js-isotope。参数可以通过一个data-isotope-options属性来给定。
在HTML中设置的参数选项必须是可用的json格式数据,Keys需要双引号引起来,例如:"itemSelector":。注意:外部的HTML属性值使用单引号引起来,json使用双引号。
Isotope有大量的参数、方法及及事件,以及布局方式,请点击下面的链接查看详细的文档介绍。
Isotope在线文档
via:http://www.htmleaf.com/jQuery/Layout-Interface/201503171535.html
查看演示
Isotope-jQuery神奇的分类过滤和排序布局插件.zip
安装你可以通过Bower或npm来安装giantess分类过滤和排序插件。
- bower install isotope
- npm install isotope-layout
或者直接使用下载包中的isotope.pkgd.js文件及压缩版的isotope.pkgd.min.js。在页面中将它引入即可。
- <script src="/path/to/isotope.pkgd.min.js"></script>
版权信息
注意:Isotope不是完全免费的软件。用于商业用途时需要向作者购买。作为非商业用途使用时,在遵循 GPL v3 License 规范的前提下,你可以自由使用该插件。
使用方法
HTML结构
Isotope元素分类过滤和排序插件的HTML结构非常简单:使用一个包裹容器来包装一组用于分类过滤和排序的元素。
- <div id="container">
- <div class="item">...</div>
- <div class="item w2">...</div>
- <div class="item">...</div>
- ...
- </div>
CSS样式
用于分类过滤和排序的items需要你手动添加CSS样式:
- .item { width: 25%; }
- .item.w2 { width: 50%; }
初始化插件
可以通过jQuery来初始化一个Isotope实例:
- $('#container').isotope()
- var $container = $('#container');
- // init
- $container.isotope({
- // options
- itemSelector: '.item',
- layoutMode: 'fitRows'
- });
imagesLoaded
如果在items中使用图片,而图片加载错误时Isotope的布局会发生错乱。解决这个问题的方法时使用imagesLoaded。imagesLoaded可以在所有的图片都被加载之后触发一个回调函数。
- // initialize Isotope after all images have loaded
- var $container = $('#container').imagesLoaded( function() {
- $container.isotope({
- // options
- });
- });
- // or with vanilla JS
- var container = document.querySelector('#container');
- var iso;
- // initialize Isotope after all images have loaded
- imagesLoaded( container, function() {
- iso = new Isotope( container, {
- // options
- });
- });
或者先初始化Isotope,然后在图片加载完成之后再设置布局:
- // initialize Isotope
- var $container = $('#container').isotope({
- // options
- });
- // layout Isotope again after all images have loaded
- $container.imagesLoaded( function() {
- $container.isotope('layout');
- });
- // or with vanilla JS
- // initialize Isotope
- var iso = new Isotope( container, {
- // options
- });
- // layout Isotope again after all images have loaded
- imagesLoaded( container, function() {
- iso.layout();
- });
Vanilla JavaScript
Isotope并不一定需要jQuery。你可以通过纯js来使用Isotope。
可以通过new Isotope( element, options )方法来初始化一个Isotope对象实例。Isotope构造器接收两个参数:一个容器元素和一个参数选项对象。
- var container = document.querySelector('#container');
- // init
- var iso = new Isotope( container, {
- // options
- itemSelector: '.item',
- layoutMode: 'fitRows'
- });
容器元素可以是一个选择器字符串或一个单独的元素:
- var iso = new Isotope( '#container', {
- // options
- });
使用HTML元素来初始化
你可以直接在html中初始化Isotope,不用任何的javascript。在容器元素上添加class js-isotope。参数可以通过一个data-isotope-options属性来给定。
- <div id="container" class="js-isotope"
- 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的过滤和排序插件
4. MixItUp:基于CSS3 & jQuery的过滤和排序插件
8. 神奇的HTML5:现在Chrome浏览器支持直接通过Gmail打开邮件链接
9. 响应式jQuery网格布局插件Grid-A-Licious
本文来源:https://www.51html5.com/a1513.html