jQuery无限载入瀑布流 【转载】
转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/
jQuery无限载入瀑布流
好久没更新日志了,一来我比较懒,二来最近也比较忙,惭愧啊。这次我要写的是关于瀑布流网页布局的方法,在网页布局中瀑布流算比较新颖的方式,最近我也试了一下,把本站的电影资源独立出来做了一个子站。因为电影都是以海报形式展示的,图片会比较多,瀑布流应该会比较合适,最后的完成品在这里:Wuyuan's Movie。使用jQuery实现,用到三个插件:Masonry、Infinite Scroll和imagesLoaded。
1.Masonry
Masonry是一款网页布局插件,能帮你自动排列网页元素,比如div和li,我这里使用li来放电影资源。
Masonry主页:http://masonry.desandro.com/
github项目:https://github.com/desandro/masonry
用法很简单,在他主页里有例子。
var $container = $('#container');
// initialize
$container.masonry({
columnWidth:200,//每列的宽度,不设就按第一个计算
itemSelector:'.item',//需要排列的元素
gutter:20,//每列的间隙
});
2.Infinite Scroll
Infinite Scroll是一款自动载入的插件,当滚动条靠近底部时会自动读取下一页的元素,并添加到相关容器里,配合Masonry实现无限载入。
Infinite Scroll主页:http://www.infinite-scroll.com/
github项目:https://github.com/paulirish/infinite-scroll
用法也很简单,我这里列举一些常用的参数。
$('.selector').infinitescroll({
//导航所在容器
navSelector:"div.navigation",
//导航中下一页的链接地址
nextSelector:"div.navigation a:first",
//需要添加的新元素
itemSelector:"div.post",
//动画效果
animate:false,
//动画效果长度
extraScrollPx:150,
//导航条到底部的距离
pixelsFromNavToBottom:200,
},
function( newElements ){
//添加新元素
})
);
很多文章中都说extraScrollPx是触发加载的滚动条剩余长度,但我改了该值后没什么反应,后来看了代码才发现这个只是动画效果触发是滚动条向下滚动的距离而已,真正可以触发加载的是下面这个pixelsFromNavToBottom,他表示导航栏到底部的距离,infinitescroll会在下拉到导航栏附近触发自动加载,也就是当滚动条剩余长度小于pixelsFromNavToBottom这个值时触发加载。后面那个函数是读取到新元素的加载函数,需要和Masonry配合,我将在下面讲到。
3.imagesLoaded
在用Masonry加载图片时会出现一个问题,因为图片的加载比较慢,Masonry会读取不到图片的高度而错误的计算元素的高度,这样就会使布局重叠。解决办法就是在图片全部加载后再使用Masonry布局,这就要用到imagesLoaded这个插件,在低版本jQuery中他是内置的函数,现在已经独立出来作为一个插件调用了。
imagesLoaded主页:http://desandro.github.io/imagesloaded/
github项目:https://github.com/desandro/imagesloaded
$('#container').imagesLoaded(function(){
// images have loaded
});
4.实际应用
将上面三个插件组合到一起就可以做出无限加载的瀑布流了,下面以我的子站为例子说一下。我所有资源使用ul和li来组织,如下。
<ulid="masonry">
<liclass="box"></li>
<liclass="box"></li>
<liclass="box"></li>
</ul>
<divid="npage"><ahref="http://movie.wuyuans.com/2.html">下一页</a></div>
下一页的链接在#npage中,下面是js代码。
<scripttype="text/javascript"src="/static/jquery-1.7.1.js"></script>
<scripttype="text/javascript"src="/static/masonry.pkgd.min.js"></script>
<scripttype="text/javascript"src="/static/jquery.infinitescroll.min.js"></script>
<scripttype="text/javascript"src="/static/imagesloaded.pkgd.min.js"></script>
<scripttype="text/javascript">
$(function(){
var $container = $('#masonry');
$container.imagesLoaded(function(){
$container.masonry({
columnWidth:235,
itemSelector:'.box',
gutter:20
});
});
$container.infinitescroll({
navSelector :"#npage",
nextSelector :"#npage a",
itemSelector :".box",
pixelsFromNavToBottom:300
},
function( newElements ){
//首先隐藏
var $newElems = $( newElements ).css({ opacity:0});
$newElems.imagesLoaded(function(){
//布局时显示
$newElems.animate({ opacity:1});
$container.masonry('appended', $newElems,true);
});
});
});
</script>
最新文章
- 动手实现自己的 STL 容器《2》---- list
- Graphics samples2
- 微信公众平台开发(99) 自定义菜单获取OpenID
- Linux(CentOS)文件操作命令
- Qt绘制异形窗体
- JQuery弹出层,实现弹层切换,可显示可隐藏。
- Remember the Word,LA3942(Trie树+DP)
- UVA1218--树形DP
- 获取设备、APP的一些信息
- winform判断输入是否是数字
- luogu P3245 [HNOI2016]大数
- [转]让linux的coredump文件
- spark-机器学习实践-K近邻应用实践一
- 蓝桥杯 ALGO-2:最大最小公倍数
- 团队作业之404 Note Found Team
- MFC中ON_COMMAND,ON_MESSAGE,ON_NOTIFY的区别
- aptitude约等于apt-get的工具
- mysql原创博客
- Mysql存储引擎的选择
- 最新版 VS2015|Visual Studio Enterprise 2015简体中文版(企业版)