Isotope

楼主 spiderman 于 2014-08-07 15:47:22
Isotope
Isotope介绍[P][URL=http://isotope.metafizzy.co/index.html]访问Isotope网站[/URL][/P][P]Isotype是一款根据浏览器窗口大小动态调整元素布局的Jquery插件，这款插件效果相当不错，打开网站就能看到实例展示，尝试缩放窗口，点击Filter、Sort或者Layout按钮，就能看到页面上的盒子神奇的变换位置。[/P][P][b]Isotype有哪些功能？[/b][/P][ul][li]动态改变布局，默认是masonry，还可以是fitrow（按行排列）或者straightdown（排成一列）[/li][li]过滤功能：利用Jquery选择器动态显示或隐藏某些元素[/li][li]排序功能：根据某个分类标准重新排列元素[/li][li]可集成性，可以与很多其他脚本共同工作，创建出更完美的效果，例如[URL=http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/]Infinite Scroll[/URL]插件[/li][/ul][P][b]Licence[/b][/P][P]注意Isotope用于商业用途需要购买许可协议，商业用途指用于任何能赚钱的网站（公司网站、出售付费主题的网站等等），个人或非盈利组织使用则是免费的[/P][P][b]下载[/b][/P][P]可以到github[URL=https://github.com/desandro/isotope]下载Isotope最新版本[/URL][/P][P][b]使用[/b][/P][P]Isotype应该用在什么样的场合？简单的说，网页结构符合一个容器包含一组结构类似的子元素即可使用，用代码表达或许更清晰[/P][P][P][TABLE=transparent,0,0,100%,left,transparent,0,none][tr][td][P]1[/P][P]2[/P][P]3[/P][P]4[/P][P]5[/P][P]6[/P][/td][td][P][P]<div id="container">[/P][P]  <div class="item">...</div>[/P][P]  <div class="item">...</div>[/P][P]  <div class="item">...</div>[/P][P]  ...[/P][P]</div>[/P][P][/P][/td][/tr][/TABLE][/P][P][/P][P]初始化脚本也相当直观[/P][P][P][TABLE=transparent,0,0,100%,left,transparent,0,none][tr][td][P]1[/P][P]2[/P][P]3[/P][P]4[/P][P]5[/P][/td][td][P][P]$('#container').isotope({[/P][P]  // options[/P][P]  itemSelector : '.item',[/P][P]  layoutMode : 'fitRows'[/P][P]});[/P][P][/P][/td][/tr][/TABLE][/P][P][/P][P]Isotope支持许多[URL=http://isotope.metafizzy.co/docs/options.html]options[/URL]，当基本应用不能满足你的需求时，就可以用这些灵活的options扩展功能。[/P][P]Isotope是一款非常强大的Jquery插件，瀑布流的布局给了用户很多新体验，相信其应用领域还有很大的挖掘空间，可以从这个出色的脚本开始。[/P]
[upload=15971,2]isotope-master.zip[/upload]
回复
1 　

电脑版 Page created in 0.0547 seconds with 3 queries.