网上对于infinite-scroll插件使用的例子不多。但由于它的出现，鼓吹了瀑布流形式的页面展示方式，所以不得不了解了解这种新的分页方式。
官网上有对infinite-scroll的详细描述，但一般人即使看未必看得懂，看得懂未必就调试成功。所以借今晚有点时间，把跑通的例子供大家借鉴。
一.无限滚动概念
首先，它是基于Jquery的，另外还要明白无限滚动的概念：无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候，触发某 ajax函数（infinite-scroll内已经封装好）,往后台加载文件或者数据，又或者从外部引入静态html形式文件。
二.探讨infinite-scroll
1.从网页头引入两个js文件，注意必须先放jquery的
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
2.之后在网页头自己写一个js脚本
<script>
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--本页的导航，意思就是一个可以触发ajax函数的模块
nextSelector: "#navigation a", //下一页的导航
itemSelector: ".scroll " , //此处我用了类选择器，选择的是你要加载的那一个块（每次载入的数据放的地方）
animate: true, //加载时候时候需要动画，默认是false
maxPage: 3, //最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿
});
});
</script>
3.或许你看到这里还是不太清楚网页怎么定义，这里给出我的demo，希望可以有帮助
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无限翻页效果</title>
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
<script src="css/infinite-scroll/test/debug.js"></script>
<script>
$(document).ready(function (){ //别忘了加这句，除非你没学Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--成功后自动隐藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
});
});
</script>
</head>
<body>
<div id="container"> <!-- 容器 -->
<div class="scroll"> <!-- 每次要加载数据的数据块-->
第一页内容第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容
</div>
</div>
<div id="navigation" align="center"> <!-- 页面导航-->
<a href="user/list?page=1"></a> <!-- 此处可以是url，可以是action，要注意不是每种html都可以加，是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数，这个一定要加在这里，它的作用是指出当前页面页码，没加载一次数据，page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->
</div>
</body>
</html>
三.细微部分
1.js函数里还可定义的其他属性:
debug : true, //用于调试，如果需要用到，只需在网页头引入官网demo里的debug.js文件
loadingImg : "/img/loading.gif", //加载时候显示的进度条，用户可以自定义
loadingText : "Loading new posts...", //加载时显示的文字
extraScrollPx: 50, //离网页底部多少像素时触发ajax
donetext : "I think we've hit the end, Jim" , //加载完数据(到达底部时)显示的文字提醒
errorCallback: function(){}, //加载完数据后的回调函数，可选
其他属性暂不作过多介绍
2.数据的载入方式
①html ：如果你已经有固定的数据块，可以放到html里面加载静态页面。
②json ：可以用后台返回json的方式，返回的时候要指定temple里面的html模版，否则会出错。
③我上面例子用的其实也是json，前台在Action层把数据取出后再用StringBuilder拼装成html格式的字符串返回前台。（个人习惯）
3.数据分页方式
本例用hibernate进行数据分页。
以上内容仅作参考，时间问题暂且收笔。
这里给出一个demo下载，不是这个例子但是原理是一样的，希望有帮助。
相关推荐
最近在项目中遇到一个需求，有一个列表需要滚动加载，类似于微博的无限滚动。当时第一反应时监听滚动事件，在判断滚动到达底部时加载下一页，同时心里也清楚，监听滚动事件需要做好截流。顺手搜索了下发现有一个现成...
vue-infinite-scroll插件可以无限滚动实现加载更多，其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。这篇文章主要介绍了用vue-infinite-scroll实现无限滚动效果,需要的朋友可以参考下
vue-infinite-scroll插件可以无限滚动实现加载更多，其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。 https://github.com/ElemeFE/vue-infinite-scroll/ ...
NPM包加载示例数据的用户页面->什么是aurelia-infinite-scroll插件？ aurelia-infinite-scroll是的插件，它添加了无限浏览器滚动功能，即Facebook加载。 当自定义属性容器的底部（即div）到达浏览器窗口的底部时，...
如何告诉这个插件没有更多的数据/页面要加载？ ¶ ↑ 这是通过从服务器返回一个空响应来确定的。 一旦发生这种情况，该插件将停止尝试加载数据。 选项¶ ↑ url: default: null The URL to fet
React无限滚动 使用React组件无限加载内容。 该fork维护了一个简单，轻量级的无限滚动包，该包同时支持window和scrollable元素。安装npm install react-infinite-scroller --saveyarn add react-infinite-scroller...
Vue下滚动到页面底部无限加载数据Demo 看到一篇, 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考. 从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件...
聪明的无限滚动这是另一个Infinite Scroll jQuery插件，但是有点聪明。 请在页面页脚或一些常见元素中实现它它非常简单，可以在Wordpress和其他CMS中使用产品特点无限滚动只有您需要一些元素使其活跃您可以自定义...
该插件使用进度条指示线程中的当前位置，并添加了一个固定的导航框，使用户可以自由跳转到任何页面而无需重新加载。 用户还可以选择禁用其个人资料中的无限滚动。 v2.0功能： 总体上更流畅的体验 表格视图兼容性...
前端项目-jquery-infinitescroll,无限滚动是一个javascript插件，它可以自动添加下一个页面，从而将用户从整页加载中保存下来。
连接Mysql代码在server/conf/conf.js... 联动滚动借助了vue-infinite-scroll插件和图片懒加载vue-lazyload插件 Express编写后台api Mysql实现数据存储 功能 登录注册 商品详情 购物车管理 地址管理 订单管理 模拟支付
1.分页加载数据的基础上，如何通过滚动加载，实现分页加载数据的效果，github上，针对AngularJS，有一款不错的插件，地址为：https://github.com/sroze/ngInfiniteScroll 2.下面来看官方给出的文档 （1）使用样例： ...
Vue.js的无限滚动插件，可帮助您更轻松地实现无限滚动列表。 产品特点 移动友好 内部微调器 2向支持 加载结果消息显示 使用与指南 要查看实时示例和文档，请访问 。 变更日志 中记录了每个发行版的详细更改。 贡献 ...
具有无限滚动支持的React Table组件 原料药 data: Array < { } > onScroll : Function onItemClick : ( item : Object ) => any onRemoveItems : ( items : Array < Object > ) = > any / >
在“设计师新闻”上滚动无尽，无需点击“下一步”就像某种...1.0.2更新：•新的加载图标，而不仅仅是“正在加载”。 您好专业精神，再见业余时间。 1.0.1更新：•更正了错误，支持动态加载的故事。 支持语言:English
允许您加载更多数据。 它没有像其他无限滚动实现那样与Ember-Data耦合。 安装 ember install @zestia/ember-simple-infinite-scroller 演示版 例 {{ #each things as | thing | }} ... {{ /
What isinfini scroll jquery 插件用来在页面滚动到屏幕底部时自动加载内容并追加 DOM 元素到页面底部，api接口友好，可能是你目前能找到的最简单好用的无限滚动加载插件。Live DemoInstallation包含 infini_scroll ...
本文实例讲述了Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能。...通过vue-infinite-scroll插件实现滚动加载，在框架末尾插入加载div，并且可以在其中放入加载动画 <div v-infinite-scroll="l
这应该可以在任何网站上使用，包括那些具有无限无限加载更新的网站，但是，如果它不能在特定网站上作为实习生使用，请告诉我。 我已经在大多数较大的站点上对其进行了测试。 此扩展程序不访问，跟踪或收集任何数据。...