Javascript

Isotope让网页布局比pinterest更灵活

最近到处搜寻Pinterest布局代码,终于找到一个wonderful的jquery插件,叫做Isotope,瀑布流、排序、分类等功能应有尽有,效果非常绚丽,想让自己的网站耳目一新的朋友千万别错过这个插件。

isotope

Isotope介绍

访问Isotope网站

Isotype是一款根据浏览器窗口大小动态调整元素布局的Jquery插件,这款插件效果相当不错,打开网站就能看到实例展示,尝试缩放窗口,点击Filter、Sort或者Layout按钮,就能看到页面上的盒子神奇的变换位置。

Isotype有哪些功能?

  • 动态改变布局,默认是masonry,还可以是fitrow(按行排列)或者straightdown(排成一列)
  • 过滤功能:利用Jquery选择器动态显示或隐藏某些元素
  • 排序功能:根据某个分类标准重新排列元素
  • 可集成性,可以与很多其他脚本共同工作,创建出更完美的效果,例如Infinite Scroll插件

Licence

注意Isotope用于商业用途需要购买许可协议,商业用途指用于任何能赚钱的网站(公司网站、出售付费主题的网站等等),个人或非盈利组织使用则是免费的

下载

可以到github下载Isotope最新版本

使用

Isotype应该用在什么样的场合?简单的说,网页结构符合一个容器包含一组结构类似的子元素即可使用,用代码表达或许更清晰

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

初始化脚本也相当直观

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

Isotope支持许多options,当基本应用不能满足你的需求时,就可以用这些灵活的options扩展功能。

Isotope是一款非常强大的Jquery插件,瀑布流的布局给了用户很多新体验,相信其应用领域还有很大的挖掘空间,可以从这个出色的脚本开始。