本文主要是介绍Infinite Scroll–无限分页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、当你往下浏览页面时，页面会自动去异步加载数据。
无限分页效果 infinite scroll 效果图 –ifxoxo.com
2、在页面下方有一个“点击加载”的按钮，点击之后页面会去加载数据。
无限分页效-infinite scroll 点击加载效果图 –ifxoxo.com
虽说这样的操作用js并不难实现，但是现在有很多成熟的插件，很好很强大，让你可以很简单的就实现这样的功能。
这篇文章就是要介绍其中的一种jquery插件–Infinite Scroll， 用它来实现无限分页。
如果想要看实例，可以到以下网址查看：
http://520xmn.com
二、具体用法
1、所需的资源
（1）jquery
既然是jquery插件，肯定是需要先加载jquery的,可以到jquery官网去下载最新的jquery：http://jquery.com/
（2）infinite scroll
到github上去下载最新的infinite scroll插件，地址如下：https://github.com/paulirish/infinite-scroll
在里面找到一个 jquery.infinitescroll.min.js
| 1 2 3 4 5 6 | //加载的时候注意文件的路径 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.infinitescroll.min.js"></script> |
2、所需的html
（1）有一个容器
当异步加载后，内容可以存在在这里
| 1 2 3 4 5 6 7 8 9 | <div id='masonny-div'> <div class="item">内容</div> <div class="item">内容</div> ...... <div class="item">内容</div> </div> |
（2）在页面上需要有一个翻页的连接
(待会需要在js上指明)，比如
| 1 2 3 4 5 6 | <div id="next"> <a href="/Pic/randpage?page=2"></a> </div> |
3、所需的css
在加载的时候，页面会出现一个loading的层（id是#infscr-loading），这个部分的样式需要我们自己去定义，
下面是我自己网站的一个半透明黑色的样式，如果你喜欢，可以直接拿去用
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #infscr-loading { text-align: center; z-index: 100; position: fixed; left: 45%; bottom: 40px; width: 200px; padding: 10px; background: #000; opacity: 0.8; color: #FFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } |
4、js部分–自动加载
前面的部分都准备之后，js部分其实是很容易的，直接调用infinitescroll方法，指明一些参数就行。（参数列表详见一、6）
如果想要看示例，可以查看520xmn.com，里面的无限分页就是用了这个插件.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $('#masonny-div').infinitescroll({ navSelector : "#next", // 页面分页元素(成功后会被隐藏) nextSelector : "#next a", // 需要点击的下一页链接，和2的html要对应 itemSelector : ".item" , // ajax回来之后，每一项的selecter //（比如每篇文章都有item这个class） animate : true, //加载完毕是否采用动态效果 extraScrollPx: 100, //向下滚动的像素，必须开启动态效果 // debug : true, //调试的时候，可以打开 bufferPx : 5, //提示语展现的时长，数字越大，展现时间越短 loading: { finishedMsg: '没有更多内容了', //当加载失败，或者加载不出内容之后的提示语 img: 'loading-new.gif', //自定义loadding的动画图 msgText : '正在加载中...', //加载时的提示语 }, }, function( newElements， opt ) { //成功后执行自定义的函数 //如果需要对新内容进行加工，就在这里实现 } }; |
5、js部分–点击后再加载
infinite scroll默认是自动加载的，但是在某些情况下，我们希望的是用户点击“加载”按钮之后，才去异步加载数据，实现起来也不难。
就在需要实现点击后再加载的地方，加上类似的代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // 取消scroll绑定 $(window).unbind('.infscr'); // 手动点击的元素 $('#next').click(function(){ $('#masonny-div').infinitescroll('retrieve'); }); // 如果没有下一页，去掉分页 $(document).ajaxError(function(e,xhr,opt){ if (xhr.status == 404) $('#next').remove(); }); $('#next').show(); //显示下一页 |
6、参数说明
infinitescroll还有很多强大的参数支持
这是从 https://github.com/paulirish/infinite-scroll翻译过来的，如果觉得翻译的不对，可以自行查询原版。
| 参数 | 默认值 | 作用 |
| debug | false | 是否打开debug模式 |
| nextSelector | “” | 翻页的链接 |
| navSelector | “” | 页面分页元素，成功后会被隐藏 |
| contentSelector | null | 指定之后，异步加载的内容会用这个设置过滤一下 |
| itemSelector | null | ajax回来之后，每一项的selecter 比如每篇文章都有item这个class |
| animate | false | 加载完毕是否采用动态效果 |
| pathParse | underfine | 切割nextSelector的url的规则， 提取出需要加载第几页 如：["/index?key1=${val1 }&key2=${val2}&page=",""] |
| dataType | html | 加载回来的数据格式，支持”json|html” |
| bufferPx | 40 | 提示语展现的时长，数字越大，展现时间越短 |
| infid | 0 | 示例的id，用于区分页面多次用到这个插件 |
7、其他
（1）操作
infiniter scroll还提供暂停和恢复操作，
如
| 1 2 3 4 5 | $('.selector').infinitescroll('pause'); $('.selector').infinitescroll('resume'); |
（2）状态
提供了几个状态供我们去查询
isDuringAjax
isInvalidPage
isDestroyed //处在destroyed状态？
isDone //加载完毕？
isPaused //处在暂停状态？
currPage //当前页数
我们可以在自定义函数里面去查询
| 1 2 3 4 5 6 7 | function( newElements， opt ){ var page = opts.state.currPage; //console.log(page); } |
这篇关于Infinite Scroll–无限分页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
