浏覽器中的幾個高度

document.body.cilentWidth;            // 網頁可見區域(body)的寬度，整數像素值

document.body.clientHeight;            // 網頁可見區域(body)的高度，整數像素值

document.body.offsetWidth;            // 網頁可見區域(body)的寬度，包括border，margin等像素值

document.body.offsetHeight            // 網頁可見區域(body)的高度，包括border，margin

document.body.scrollWidth            // 網頁正文的寬度，包括有滾動條溢出的寬度

document.body.scrollHeigh            // 網頁正文的高度，包括有滾動條溢出的高度 滾動條的滾動區域

var top = document.documentElement.scrollTop || document.body.scrollTop;

document.body.scrollLeft            //

window.screen.height;               //螢幕分辨率的高

window.screen.width;                //螢幕分辨率的寬

window.screen.availHeight;          //螢幕可用工作區的高

window.screen.availWidth;           //螢幕可用工作區的寬

複制

document.documentElement.scrollHeight        // 文檔的高度 = $('html').height()

document.documentElement.scrollTop            // 滾動條頂部到文檔頂部的距離 = $('html').scrollTop()

document.documentElement.clientHeight        // 用戶端高度

滾動條到底部的時候關系：
clientHeight + scrollTop = scrollHeight

用戶端高度    +   滾動上去的高度  =  可滾動高度（文檔高度）

複制

那麼上拉加載的效果，

使用者進入網頁：

載入首批資料，文檔高度（

$('html').height() == 2500px

）

使用者滾動滾當條，當（監聽滾動條的滾動狀态）

document.documentElement.scrollTop + document.documentElement.clientHeight + 500 > document.documentElement.scrollHeight

複制

，及使用者可滾動剩下500px高度的時候，開始下一次的資料加載

當資料加載的時候，停止滾動條監聽，滾動條的觸發需要限制，比如觸發後2s時間内不再觸發。

反複如此，當資料加載完畢的時候，比對現有資料條數，與服務端傳回的資料總數，如果相等，則加載完畢，那麼清除滾動條監聽

那麼一個簡單的上拉加載資料頁面就OK了~

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>上拉加載示例</title>
    <style type="text/stylesheet">
        *{
            margin:0;
            padding:0;
            border:0;
        }
    </style>
</head>
<body>

<div class="gallary" style="width=500px;background-color:#666;"> </div>

<p class="tips" style="width:100%;text-align:center;">上拉加載...</p>

<div class="cover" style="background-color:red;z-index:999;position:fixed;width:100%;height:100vh;top:0;display:none;">
    <h1 style="color:#fff;">加載中...</h1>
</div>

<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>
// 擷取資料，追加到網頁
function getImages(pageNum){
    $(".cover").show();
    $.get(''+pageNum, function(data, status){
        if(data) {
            var data = JSON.parse(data);
            $.each(data.data, function(index, obj) {
                $('.gallary').append('<img src="'+obj[0]+'" style="height:300px;margin:15px;" title="'+ obj[1]+'" />');
            });
            $(".cover").hide();
        } else {
            $(".cover").hide();
        }
    });
}

$(function(){
    // 加載第一次的資料
    getImages(0);
    // 全局統計頁數
    var PageNum = 1;
    var timer = null;

    // 監聽滾動條變化
    $(window).scroll(function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            if(document.documentElement.scrollTop + document.documentElement.clientHeight + 500 > document.documentElement.scrollHeight ) {
                // 還有300px距離可滾動的時候觸發
                if(PageNum >= 5) {
                    // 資料加載完畢
                    $('.tips').text('沒有更多了~');
                    return;
                }else {
                    getImages(PageNum++);
                }
            }
        }, 1000);
    });
});
</script>
</body>
</html>

複制