time 
设为首页】【收藏本站

白小姐马报102期: 白小姐彩图

当前位置: 白小姐彩图 > JavaScript > Jquery > jQuery.masonry和jQuery.infinitescroll瀑布流布局实例

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

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




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

1、jquery.masonry,目前布局流行的瀑布流插件有很多,//www.csswang.com/resource/2261.html,这里有很多介绍,这个插件算是比较流行的一款吧,文档也布局详细,官网地址://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,官网地址为://www.infinite-scroll.com,详细说明可以到官网查看,这里介绍他的一些核心的参数

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

 



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

  • Valentino 2017秋冬高级定制大秀 2018-09-08
  • 中国经济充当了世界经济发展的火车头。但是,作为世界经济火车头的中国,在世界主要经济体股市都走牛的情况下,为何熊途漫漫?这种不正常的现象,背后是我们资本市场的投融 2018-07-14
  • 别空谈,说说看,这个“简单的逻辑关系”是什么关系? 2018-07-13
  • “讲课带着泥土味,我们都爱听” 2018-07-13
  • 习近平:绿水青山就是金山银山 2018-07-12
  • 端午思屈原,为什么《橘颂》是一篇伟大的作品 2018-07-11
  • 2018年焉耆县旅游美食文化推介会在库尔勒市举行 2018-07-10
  • 《中国气候变化蓝皮书》:年平均气温显著上升 2018-07-10
  • 24小时智能无人便利店落户唐山 2018-07-09
  • 理货员忙不过来 宁波球迷把啤酒销量喝成井喷状态 2018-07-09
  • 回复@寻找失落的真理:跟你的铁环玩去!咱真的没兴趣碾压你也。 2018-07-08
  • 易烊千玺押中高考作文题?不仅会押,今年还唱过! 2018-07-07
  • 【北京达世行世纪车型报价】北京达世行世纪4S店车型价格 2018-07-06
  • 欢迎访问《北京体育大学学报》编辑部网站 2018-07-05
  • 590| 857| 522| 158| 108| 53| 779| 601| 239| 15|