jquery实现滑动到底部加载下一页的数据

为了减少页面的加载量和页面的呈现速度，不是所有的内容都需要在第一时间加载给用户看。用户在浏览第一屏内容的时候，那么加载第一屏以下的内容不是很有必要的，当用户在浏览页面时，动态地按需加载即可。也就是当滑倒页面的底部的时候，再触发加载事件，加载文章内容。

我们先看一下滚动条滚动到底部时触发事件的原理：

当（可视区域的高度+可视区域距离内容顶部的距离） >=  内容的真实高度   的时候触发数据加载事件，加载下一页的数据。我们看一下示意图：

如上图，我们想象可视区域是固定位置不变的，内容的真实区域（也就是最外层的长方形）是向上滑动的，当滑动到如下图所示的时候，也就是滚动条滑动到底部的时候，触发加载下一页数据事件:

下面我们呈现代码：（首先需要注意的是填装内容的区域必须被撑出滚动条，我们用mock.js来模拟新的数据）：

简单看一下mock.js用法（这里只用到边角的东西，实际没怎么深入去了解过）：

上图中的‘path/to/file’就是稍后ajax要访问的路径，data是ajax请求后得到的数据，10表示每次加载10条数据。 返回的十条数据相当于：

mock.js简单介绍到这里，接下来我们看下加载数据，我把加载数据的相关方法都放到一个json中去，名称是LoadData;

(其中的model，是数据模板,request是ajax请求了)

再看一下滚动事件：（同样也是放到一个json中去，当用户滚动到底端的时候，发起请求，接受数据，将模板填充到容器中）

在页面初始化的后，就要调用这个方法，加载第一页的10条数据：

结果：

滚动加载就暂时分享到这里了，，有什么bug的地方，可以给我留言，大家共同进步。