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

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在线文档