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

瀑布流布局效果不错，国内大大小小的瀑布流布局的网站都很多了，比如美丽说、花瓣、欧叶拉等，关于瀑布流布局的资料打开可以自己百度下，这里介绍两个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的返回值})；

Demo下载

转载于:https://www.cnblogs.com/robinapp/p/4304901.html