Isotope是一款效果非常神奇的元素分类过滤和排序布局jQuery插件。Isotope是Masonry布局的作者David DeSandro的一款力作,该分类过滤和排序插件允许你以非常简单和炫酷的方式来隐藏和显示元素,以及对元素按照指定的规则进行排序。Isotope可以设置多种布局方式:masonry布局(瀑布流)、水平布局、垂直布局、适合行布局、适合列布局等等。
注意:Isotope不是完全免费的软件。用于商业用途时需要向作者购买。作为非商业用途使用时,在遵循 GPL v3 License 规范的前提下,你可以自由使用该插件。
Isotope元素分类过滤和排序插件的HTML结构非常简单:使用一个包裹容器来包装一组用于分类过滤和排序的元素。
<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>
用于分类过滤和排序的items需要你手动添加CSS样式:
.item { width: 25%; }
.item.w2 { width: 50%; }
初始化插件,可以通过jQuery来初始化一个Isotope实例:
$('#container').isotope()
var $container = $('#container');
// init
$container.isotope({
// options
itemSelector: '.item',
layoutMode: 'fitRows'
});
