阅读本文可能会解决的问题：
① infinite-scroll.js和html页面的整合② infinite-scroll.js的配置
③ 翻页时的传参问题
④ 前台及后台分页配置
⑤ 数据加载格式及和SpringMVC配合返回数据
⑥ ...
这里先说几句无关的话，无限翻页是一个很简单的需求，为了节省网络资源提高用户体验很多网站都使用这种形式，但是在自己做的时候发现一个很实用的js插件被很多人描述的很潦草，还有的居然骗下载赚积分，真的过分！自己研究之后决定记录一下，方便自己也分享给大家。
这个示例实现的效果：打开页面鼠标滚轮滑到页面底部，自动加载下一页数据，直到所有数据加载完成。
一、infinite-scroll.js和html页面的整合及配置
1. 首先需要引入两个js文件，jQuery就不说了，jquery.infinitescroll.js可以在 infinitescroll中文网下载，或者去 官网下载最新的版本，中文网提供了3.X之前的几个版本可以下载使用，我这里选择2.0的版本 <script src="../js/home/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/home/jquery.infinitescroll.js"></script>引入js后需要注意：
① 用户第一次打开页面需要预先加载几条数据
② 我这里都是动态从后台获取的数据
③ 在界面加载数据我使用模板语言thymeleaf，如果是jsp直接用EL表达式获取数据即可
④ ul就是要填充下一页数据的容器每次执行翻页就会向ul中添加新取回的li
<div class="content-center">
<ul class="content-center-ul" id="content"><!--这里是用来加载初始数据和翻页数据的容器-->
<li class="item" th:each="item : ${pagae.content}"><!--这里接收后台的list预先加载几条数据显示-->
<label th:text="${item.wzbt}"></label>
<p th:text="${item.zy}"></p>
</li>
</ul>
<div id="pages" align="center" style="display: none;"><!--这里在数据底部显示一个下一页按钮-->
<a id="next" href="../article/getList?page=0">下一页</a>
</div>
<div class="loading"></div><!--这里是loading选择器用来显示加载数据的一些信息-->
</div>2. 接下来引入js配置文件
$('#content').infinitescroll({
loading: {
msgText: "",
img: "/images/home/loading2.gif",
finishedMsg: '没有新数据了...',
selector: '.loading' //loading选择器
},
hideNav: '#pages',
navSelector: "#pages",//导航的选择器，会被隐藏
nextSelector: "#next",//包含下一页链接的选择器
itemSelector: "li",//你将要取回的选项(内容块)
debug: false, //启用调试信息，若启用必须引入debug.js
dataType: 'json',//格式要和itemSelector保持一致
template: function(data) {
//data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
//console.log(data.list);
//return '<li><label>测试数据1</label><p>测试数据1</p></li><li><label>测试数据2</label><p>测试数据2</p></li>';
return data.list;
},
maxPage: 5,//最大加载的页数
animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150
// bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短
errorCallback: function() { //加载完数据后的回调函数
},
path: function(index) { //获取下一页方法
return "../article/getList?page=" + index+"&wzlb=" + clickid;
},
},
function(newElements, data, url) { //回调函数
//console.log(data);
//alert(url);
});① itemSelector: "li"是我们要加载的数据内容
② dataType: 'json'代表我从后台接收回来的数据是json格式，当然还可以是html
③ 这里template用来处理返回的数据，我使用springmvc返回json数据直接return即可
template: function(data) {
//data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
//console.log(data.list);
//return '<li><label>测试数据1</label><p>测试数据1</p></li><li><label>测试数据2</label><p>测试数据2</p></li>';
return data.list;
},④ 这里path获取下一页的请求地址，page是插件自动递增所以不需要处理，直接拼接index即可，如果有其他参数需要传递需要像我这样拼接，最好将page参数放在第一位否则可能引起错误
path: function(index) { //获取下一页方法
return "../article/getList?page=" + index+"&wzlb=" + clickid;
},⑤ 这里推荐大家一个loading的gif动图，配置好路径就可以了
二、infinite-scroll和SpringMVC的数据交互
直接看代码
@RequestMapping(value="/getList",method = RequestMethod.GET)
@ResponseBody
public ModelMap getList(HttpServletRequest request, HttpServletResponse response, String wzlb, String page){
StringBuffer sb = new StringBuffer();
ModelMap map = new ModelMap();
try {
Sort sort = new Sort(Sort.DEFAULT_DIRECTION, "id");
Pageable pageable = new PageRequest(Integer.parseInt(page)-1, 10, sort);
Page<Article> pagae = articleService.findByWzlb(pageable, wzlb);
pagae.getContent().forEach((Article article)->sb.append("<li><label>"+article.getWzbt()+"</label><p>"+article.getZy()+"</p></li>"));
map.put("list",sb);
}catch (Exception e){
e.printStackTrace();
}
return map;
}① @ResponseBody指定返回数据类型是json格式，接收String wzlb, String page两个参数
② Pageable pageable = new PageRequest(Integer.parseInt(page)-1, 10, sort);需要三个参数，分别是页码，数据量大小和排序规则，我在这里将page-1是因为当第一次请求下一页时page传进来的值为2，但是我们通过Pageable分页传参页码是从0开始，因此需要减1，后面infinite-scroll会自动递增page这样写也是合理的。
③ 返回的list可以在后台拼接也可以在js配置 template: function(data) {...} 中处理，将数据拼成你需要的形式即可。
本文完 2018-5-23
有问题欢迎大家留言
来自 https://blog.csdn.net/zhulier1124/article/details/80415561
转载请注明，谢谢。