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

页面滚动到底部自动加载下一页功能的实现，效果见本博首页

1、endlesspage.js文件内容

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);
    });
});

2、界面调用

<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>