平日使用今日头条较多，在思考一个问题：怎么下翻时实现信息自动加载呢。在html中，有时也需要实现网页"加载更多"功能，来按需求加载显示更多数据给用户，这样界面更加亲和和快速。今晚值班来实验一番！
1、滚动条简单实现功能。
此方法需要手动拉动滚动条，而且内容一次性展示。
<div style="height:300px;width:200px;overflow:scroll;">
</div>
div 内容的高度大于 300px 就会出现垂直滚动条，小于 300px 就没有滚动条。如果宽度大于 200px 会出现水平滚动条，小于就没有。
也可以只设置垂直滚动条
<div style="height:300px;overflow-y:auto"></div>
水平滚动条
<div style="width:100px;overflow-x:auto"></div>
2、JS实现按钮点击加载
<div id="box"></div>
<button id="btn">加载更多</button>
JS代码，不断加载data里面的数据。
var data = ["55", "55", "77", "77", "88", "dd88d", "eee", "777", "888", "999", "10", "11"];
var nums = 4;
var curr = 1;
var render = function(curr) {
var str = '',
last = curr * nums - 1;
last = last >= data.length ? (data.length - 1) : last;
for (var i = (curr * nums - nums); i <= last; i++) {
str += '<li>' + data[i] + '</li>';
}
return str;
};
var boxDom = document.getElementById("box");
boxDom.innerHTML = render(curr);
document.getElementById("btn").onclick = function() {
curr++;
boxDom.innerHTML += render(curr);
if (curr > 3) {
curr = 3;
alert("没有更多了");
}
}
3、开源代码实现加载更多
https://github.com/52fhy/loadmore，此开源JS里面有三个方法来实现。
3.1基于按钮实现加载更多，点击下加载更多，没有更多则隐藏加载更多按钮
函数getData(pageStart, pageSize);从服务器循环读取json数据，append到div里面。可以在github上下载查看例程。和第二种方式类似，只是循环ajax读取服务器JSON数据，节省带宽。
3.2基于滚动事件实现加载更多
当滚动到最底部以上100像素时， 加载新内容，核心代码如下
if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
}
这里面还有要优化的地方，如何防止滚动过快，服务端没来得及响应造成多次请求。
3.3优化后loadmore.js综合实例
实例默认使用滚动事件实现加载更多，当显示数目太小不足以触发向下滚动加载更多的逻辑时，使用加载更多点击事件。
<script src="js/loadmore.js"></script>
具体代码就不附上了，可去github上下载按照例程使用。1click，2crroll，3better分别对应上面三种方法。
网友评论