Isotope是一款效果非常神奇的元素分类过滤和排序布局jQuery插件。Isotope是Masonry布局的作者David DeSandro的一款力作,该分类过滤和排序插件允许你以非常简单和炫酷的方式来隐藏和显示元素,以及对元素按照指定的规则进行排序。Isotope可以设置多种布局方式:masonry布局、水平布局、垂直布局、适合行布局、适合列布局等等。
安装
你可以通过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在线文档版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!