jQuery无限载入瀑布流 【转载】

转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/

好久没更新日志了，一来我比较懒，二来最近也比较忙，惭愧啊。这次我要写的是关于瀑布流网页布局的方法，在网页布局中瀑布流算比较新颖的方式，最近我也试了一下，把本站的电影资源独立出来做了一个子站。因为电影都是以海报形式展示的，图片会比较多，瀑布流应该会比较合适，最后的完成品在这里：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来组织，如下。

<ul>

<liclass="box"></li>

<liclass="box"></li>

<liclass="box"></li>

</ul>

<div><ahref="http://movie.wuyuans.com/2.html">下一页</a></div>

下一页的链接在#npage中，下面是js代码。

1. <scripttype="text/javascript"src="/static/jquery-1.7.1.js"></script>
2. <scripttype="text/javascript"src="/static/masonry.pkgd.min.js"></script>
3. <scripttype="text/javascript"src="/static/jquery.infinitescroll.min.js"></script>
4. <scripttype="text/javascript"src="/static/imagesloaded.pkgd.min.js"></script>
5. <scripttype="text/javascript">
6. $(function(){
7. var $container = $('#masonry');
8. $container.imagesLoaded(function(){
9. $container.masonry({
10. columnWidth:235,
11. itemSelector:'.box',
12. gutter:20
13. });
14. });
15. $container.infinitescroll({
16. navSelector :"#npage",
17. nextSelector :"#npage a",
18. itemSelector :".box",
19. pixelsFromNavToBottom:300
20. },
21. function( newElements ){
22. //首先隐藏
23. var $newElems = $( newElements ).css({ opacity:0});
24. $newElems.imagesLoaded(function(){
25. //布局时显示
26. $newElems.animate({ opacity:1});
27. $container.masonry('appended', $newElems,true);
28. });
29. });
30. });
31. </script>