頁面滾動到底部自動加載下一頁功能的實現

頁面滾動到底部自動加載下一頁功能的實現，效果見本博首頁

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>