masonry+infinitescroll实现无限加载分页
2017-06-15 16:15
302 查看
在我的博客中之前已经分别讲过masonry和infinitescroll插件,以及详尽的demo。这里讲的重点是二者的结合实现无限加载分页,话不多说,直接上代码。
demo下载地址 http://download.csdn.net/detail/jiangjundriver/9871462
$(function(){ var $container = $('#masonry'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.box', gutterWidth : 20, isAnimated: true, }); }); infiniteScroll = function() { // infinite scrolling var $container = $('#masonry'); $container.infinitescroll({ binder: $('#conScroll'), navSelector : '#page-nav', // selector for the paged navigation nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) itemSelector : '.box', // selector for all items you'll retrieve pixelsFromNavToBottom: 150, extraScrollPx: 50, // debug : true, prefill : true, bufferPx : 1, //提示语展现的时长,数字越大,展现时间越短 path : function(page){ return 'image.html'; }, loading: { finishedMsg: 'no more comments!', msgText: 'onload old comments', img: 'images/loading-dark.gif' } }, function( nextComments ) { var $nextComm = $( nextComments ); $container.masonry( 'appended', $nextComm, true ); //这里需要特别注意 }); } infiniteScroll(); });
demo下载地址 http://download.csdn.net/detail/jiangjundriver/9871462
相关文章推荐
- Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流(转)
- js无限加载分页原理实现
- jquery.masonry + jquery.infinitescroll 实现瀑布流
- jQuery瀑布流无限拖三大利器:masonry+imagesloaded+infinitescroll
- AngularJS中的滚动加载,通过ngInfiniteScroll实现下拉滚动加载
- js 实现无限加载分页(适合移动端)
- AngularJS中的滚动加载,通过ngInfiniteScroll实现下拉滚动加载
- jquery.infinitescroll无限加载插件
- AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
- ionic实现上拉加载更多(组件 ion-infinite-scroll使用,以及多次加载的问题)
- jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理
- [DIV/CSS] Vue.js 开发实践:实现精巧的无限加载与分页功能
- JS实现无限分页加载——原理图解
- 使用infinite-scroll实现Ghost博文列表的滚动加载
- 【无限滚动加载数据】—infinite-scroll插件的使用
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- infinite-scroll插件无限滚动加载数据的使用
- js 实现无限加载分页(适合移动端)
- YDUI Touch InfiniteScroll无限加载数据测试
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll