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

最新推荐文章于 2024-07-06 17:13:35 发布

iteye_2245

最新推荐文章于 2024-07-06 17:13:35 发布

阅读量698

点赞数

分类专栏：优秀插件翻译文章标签： Isotope

优秀插件翻译专栏收录该内容

1 篇文章 0 订阅

订阅专栏

之所有做这个是因为我个人很赞这个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