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

时间 2019-12-13

标签 jquery.masonry jquery masonry jquery.infinitescroll infinitescroll 实现瀑布栏目 JQuery 繁體版

原文原文链接

瀑布流布局效果不错，国内大大小小的瀑布流布局的网站都不少了，好比美丽说、花瓣、欧叶拉等，关于瀑布流布局的资料打开能够本身百度下，这里介绍两个jquey插件实现瀑布流布局和动态加载数据（分页加载）。javascript

1、jquery.masonry，目前布局流行的瀑布流插件有不少，官网地址：http://masonry.desandro.com，详细的你们能够去官网看，只要简单几句js代码便可实现瀑布流布局了，代码以下：html

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

这里介绍下核心的参数，其余能够到官网查看；java

itemSelector    class选择器,默认'.item'，这个表示每一个块的选择器
columnWidth    一列的宽度
isAnimated    使用jquery的布局变化,默认true
animationOptions    animate属性渐变效果(Object { queue: false, duration: 500 })
gutterWidth    列的间隙 Integer
isFitWidth 自适应浏览器宽度Boolean
isResizableL    是否可调整大小 Boolean
isRTL    使用从右到左的布局 Booleanjquery

二、jquery.infinitescroll，有了瀑布流布局，咱们还须要一个动态加载的功能，也就是浏览器滚动条滚动到底部的时候，须要动态加载数据，这里介绍使用分页的方式加载数据，插件名称为jquery.infinitescroll，官网地址为：http://www.infinite-scroll.com，详细说明能够到官网查看，这里介绍他的一些核心的参数json

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

浏览器

通常的代码以下：app

 
         $( 
         '#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这个插件，网上不少介绍包括官网也有，可是都不是很详细，这里说明下需注意的地方：函数

一、分页导航html格式问题，并非任意的html均可以的，必须有必定的格式，具体能够看插件的源码，格式如：page.aspx?page=1或者page/2/，还有其余格式请看源码；每次加载前会数字会递增1，后台能够用Request["page"]获取参数；布局

二、若是要json数据，那么必须指定dataType参数为json，并设置template模板方法，该方法接收一个json数据，而后把json替换成瀑布流的html就能够了；post

三、数据返回后，须要从新调用瀑布流插件从新布局，query.infinitescroll在数据返回后又一个回掉，格式为：$('#content').infinitescroll({},function(newElems){//newElems表示返回的数据，若是是json的话就是template的返回值})；

Demo下载