time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > Jquery > jQuery.masonry和jQuery.infinitescroll瀑布流布局实例

jQuery.masonry和jQuery.infinitescroll瀑布流布局实例

时间:2013-04-26 12:30 点击:16476次 字体:[ ]




最近瀑布流布局非常流行,国内大大小小的瀑布流布局的网站都很多了,比如美丽说、蘑菇街、花瓣等,关于瀑布流布局的资料打开可以百度自己看了,这里介绍两个jquey插件实现瀑布流布局和动态加载数据(分页加载)。

1jquery.masonry,目前布局流行的瀑布流插件有很多,http://www.csswang.com/resource/2261.html,这里有很多介绍,这个插件算是比较流行的一款吧,文档也布局详细,官网地址:http://masonry.desandro.com,详细的大家可以去官网看,只要简单几句js代码即可实现瀑布流布局了,代码如下:

  1. $('.wrapper:eq(1)').masonry({   
  2.     itemSelector: '.wfc',   
  3.     gutterWidth: 15,   
  4.     columnWidth: 222,   
  5.     isFitWidth: true 
  6. });  

这里介绍下核心的参数,其他可以到官网查看;

itemSelector     class选择器,默认'.item',这个表示每个块的选择器
columnWidth     一列的宽度
isAnimated     使用jquery的布局变化,默认true
animationOptions     animate属性渐变效果(Object { queue: false, duration: 500 })
gutterWidth     列的间隙 Integer
isFitWidth     自适应浏览器宽度Boolean
isResizableL     是否可调整大小 Boolean
isRTL     使用从右到左的布局 Boolean

2、jquery.infinitescroll,有了瀑布流布局,我们还需要一个动态加载的功能,也就是浏览器滚动条滚动到底部的时候,需要动态加载数据,这里介绍使用分页的方式加载数据,插件名称为jquery.infinitescroll,官网地址为:http://www.infinite-scroll.com,详细说明可以到官网查看,这里介绍他的一些核心的参数

itemSelector    class选择器,默认'div.post',这个表示上面介绍的瀑布流的块的选择器
nextSelector    表示分页中下一页的选择器,默认为div.navigation a:first
navSelector     表示分页导航的选择器,分页导航会被隐藏
extraScrollPx   滚动条距离底部多少像素的时候开始加载,默认150
dataType        表示动态加载返回数据的格式,默认html
template         表示返回json时,用来生成瀑布流块html代码的模板方法,如果返回是json,那么必须指定这个参数,否则会报错

 



本文地址 : http://www.fengfly.com/plus/view-212534-1.html
标签: jQuery.infinitescroll 瀑布流布局 jQuery.masonry
------分隔线----------------------------
相关文章
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: