在线情况
楼主
  • 头像
  • 级别
  • 徽章
  • 职务总版主
  • 声望+46
  • 积分17062
  • 经验1436150
  • 文章25382
  • 注册2003-01-20
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]
LeadBBS 官方论坛(asp论坛)感谢您的参与
Page created in 0.0078 seconds with 4 queries.