jquery.masonry + jquery.infinitescroll 实现瀑布流布局

十度 JQuery 2016年02月19日 收藏

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

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

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

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

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,那么必须指定这个参数,否则会报错

一般的代码如下:

$('#waterfall').infinitescroll({
                navSelector: "#navigation", //导航的选择器,会被隐藏
                nextSelector: "#navigation a", //包含下一页链接的选择器
                itemSelector: ".wfc", //你将要取回的选项(内容块)
                debug: true, //启用调试信息
                animate: true, //当有新数据加载进来的时候,页面是否有动画效果,默认没有
                extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载,默认150
                bufferPx: 40, //载入信息的显示时间,时间越大,载入信息显示时间越短
                errorCallback: function() {
                    alert('error');
                }, //当出错的时候,比如404页面的时候执行的函数
                localMode: true, //是否允许载入具有相同函数的页面,默认为false
                dataType: 'html',//可以是json
//                template: function(data) {
//                    //data表示服务端返回的json格式数据,这里需要把data转换成瀑布流块的html格式,然后返回给回到函数
//                    return '';
//                },
                loading: {
                    msgText: "加载中...",
                    finishedMsg: '没有新数据了...',
                    selector: '.loading' // 显示loading信息的div
                }
            }, function(newElems) {
                //程序执行完的回调函数
                var $newElems = $(newElems);
                $('.wrapper:eq(1)').masonry('appended', $newElems);
            });

对于jquery.infinitescroll这个插件,网上很多介绍包括官网也有,但是都不是很详细,这里说明下需注意的地方:

1、分页导航html格式问题,并不是任意的html都可以的,必须有一定的格式,具体可以看插件的源码,格式如:page.aspx?page=1或者page/2/,还有其他格式请看源码;每次加载前会数字会递增1,后台可以用Request["page"]获取参数;

2、如果要json数据,那么必须指定dataType参数为json,并设置template模板方法,该方法接收一个json数据,然后把json替换成瀑布流的html就可以了;

3、数据返回后,需要重新调用瀑布流插件重新布局,query.infinitescroll在数据返回后又一个回掉,格式为:$('#content').infinitescroll({},function(newElems){//newElems表示返回的数据,如果是json的话就是template的返回值});