Isotope------这是一个神奇的layout(翻译介绍)

之所有做这个是因为我个人很赞这个plugin,所以决定翻译官网的所有东西，给大家一起分享一下。

 

1. 简介（Introduction）

 

Isotope ------一个精美而神奇的jQuery的layouts插件。

 

2. 功能（Features）

 

• layout 模式：智能化，不能只用css简单地实现的动态layouts
• 过滤：简单地用jQuery的选择器隐藏和显示元素
• 排序：可以重新对element进行排序。用于排序的数据可以从任何地方进行提取。
• 互操作性：功能可以一起运用在有凝聚力的经验上（a cohesive experence）
• 逐步增强：Isotope的动画引擎在比如css transitions（过渡）和transforms（转换），CPU加速这样的最好的浏览器功能可用的情况下占据很大的优势。但是它将针对一些版本低的浏览器而回归到javascript animation.

3. 开始探究吧

Isotope 依赖于jQuery 1.4.3版本及更高的版本（个人觉得原因应该是这个版本开始支持easing）

 

  a. HTML:

//Isotope在一个container的元素上工作，内部有很多相似的子元素
<div id="container">
   <div class="item">...</div>
   <div class="item">...</div>
   <div class="item">...</div>
   <div class="item">...</div>
   <div class="item">...</div>
   .....
</div>

 b. javascript:

$("#container").isotope({
    itemSelector : '.item',
    layoutMode: 'fitRows'
});

 

有很多的配置属性你可以设置.在这些配置属性里你可以设置layout模式，过滤元素和排序元素。

此外你可以在options object后面设置callback。这个方法会在动画完成后触发。

$("#container").isotope({
    filter : '.my0selector'},function($item){
     var id = this.attr("id"), 
           len = $item.length;
     console.log('Isotope has filtered for' +len+ ' items in #' + id);
  }
});

 在这个callback里面  this指向的是container.

                              $items指向的是item elements

 他们多少jQuery对象而不需要放在jQuery wrappers里面

4. 适度（moderation）

Isotope 启用了丰富的功能。但是仅仅因为你能一起利用它的无数的功能，这不意味着你必须那样做。每一个你执行的Isotope的功能，考虑一下用户受到的益处,同时你的接口的复杂程度的代价

5. 代码库（code repository）

https://github.com/desandro/isotope