页面滚动到底部自动加载下一页功能的实现

var gPageSize = 10;
var i = 1; //设置当前页数，全局变量
var finished = false;
var dataUrl = '';

$(function () {
//根据页数读取数据
function getData(pagenumber) {
//console.log(i);
$.get(dataUrl, { pagesize: gPageSize, p: pagenumber }, function (data) {
//if (data.length > 0) {
//var jsonObj = JSON.parse(data);
jsonObj = data.info;
insertDiv(jsonObj);
//}
});
$.ajax({
type: "post",
url: dataUrl,
data: { pagesize: gPageSize, p: pagenumber },
dataType: "json",
success: function (data) {
$(".loading").hide();
if (data.length > 0) {
//var jsonObj = JSON.parse(data);
jsonObj = data.info;
insertDiv(jsonObj);
}
},
beforeSend: function () {
$(".loading").show();
},
error: function () {
$(".loading").hide();
}
});
i++; //页码自动增加，保证下次调用时为新的一页。
}

//核心代码
var winH = $(window).height(); //页面可视区域高度
var scrollHandler = function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滚动条top
var aa = (pageH - winH - scrollT) / winH;
if (!finished && aa < 0.2) { //0.02是个参数
if (i % 10 === 0) { //每10页做一次停顿
getData(i);
$(window).unbind('scroll');
$("#btn_Page").show();
} else {
getData(i);
finished = true;
setTimeout(function(){finished = false;},500);
$("#btn_Page").hide();
}
}
}

//初始化加载第一页数据
getData(1);

//定义鼠标滚动事件
$(window).scroll(scrollHandler);

//继续加载按钮事件
$("#btn_Page").click(function () {
getData(i);
$(window).scroll(scrollHandler);
});
});

<script src="__PUBLIC__/Js/endlesspage.js"></script>
<script type="text/javascript">
dataUrl = "/Home/Index/index2";
//生成数据html,append到div中
function insertDiv(jsonData) {
var $mainDiv = $(".articleList");
var html = '';
for (var i = 0; i < jsonData.length; i++) {
html += '<div class="panel panel-success">';
html += '<div class="panel-heading"><h4 class="panel-title"><button type="button" class="btn btn-danger btn-sm"><i class="fa fa-bar-chart-o fa-fw">' + jsonData[i].visitNums + '</i></button> <a href="/Home/Article/detail/id/' + jsonData[i].id + '">' + jsonData[i].title + '</a></h4></div>';
html += '<div class="panel-body"><p>' + jsonData[i].summary + '</p></div>';
html += '<div class="panel-footer"> <em class = "pull-right"> ' + jsonData[i].channelName + ' </em><em>最后更新： ' + date('Y-m-d H:i:s', jsonData[i].update_time) + ' </em></div>';
html += '</div>';
}
$mainDiv.append(html);
}
</script>