前端滑动分页获取数据（jQuery）

最近在做的一个项目的时候用到滑动分页请求数据的方式，正好整理一下写成博客，留作记录。

原理：当滚动条滑动到距离页面底部时候一定距离（距离自己设定）的时候，进行数据请求，再数据请求的时候为了防止滑动再次触发请求数据的函数时，我们需要设立一个flag，根据情况设定flag的true或false的值，

首先设定两个全局的参数

    var flag;   // flag为true的时候可以滑动请求，否则说明数据没有那么多
    var num;    //  数据请求时的第几页，默认从0开始  

页面初始化

    $(function() {
        // 页面初始化的时候请求数据，默认num为0
        num = 0;
        getData(num);
    })

然后写请求数据的函数

    // 请求数据的函数，参数num为请求第几页，动态传入
    function getData(num) {
        // 当触发了请求函数时必须将flag设为false以阻止连续被触发
        flag = false;
        $.ajax({
            url: "http://www.api.com",
            type: "GET",
            data: {
                num: num
            },
            dataType: "JSON",
            success: function (res) {
                // 后台返回的数据res = {data: []}
                // 假设后台一次返回数据10条
                if(res.data.length == 10) {
                    // 如果返回的值数量等于10条的时候证明还有其他数据
                    // 那么可以吧flag设为true，
                    flag = true;
                }

                // 输出数据
                console.log(res.data);
            }
        })
    }

获取滚动条距离页面底部的距离

滚动条距离页面底部的距离是通过文档实际高度减去可视窗口的高度减去滚动条的高度，那我们就要获取这个三个的高度

• 获取文档高度

    // 获取文档内容实际高度
    function getDocumentHeight(){  
        return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);  
    }

• 获取可视窗口的高度

    function getClientHeight(){  
        var clientHeight=0;  
        if(document.body.clientHeight&&document.documentElement.clientHeight){  
            var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
        }else{  
            var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
        }  
        return clientHeight;  
    }

• 获取滚动条的高度

    function getScrollHeight(){  
        var scrollTop=0;  
        if(document.documentElement&&document.documentElement.scrollTop){  
            scrollTop=document.documentElement.scrollTop;  
        }else if(document.body){  
            scrollTop=document.body.scrollTop;  
        }  
        return scrollTop;  
    }

• 当页面滚动的时候实时计算滚动条距离底部的高度

    // 窗口可视范围的高度
    var wHeight=getClientHeight();
    // 窗口滚动条高度
    var sHeight=getScrollTop();
    // 获取文档内容实际高度
    var dHeight=getScrollHeight();
    // 滚动条距离底部的高度
    var bheight=dHeight-wHeight-sHeight;
    
    // 如果高度小于自己设定的值时并且flag为true时，可以调用请求数据的函数，请求更多的数据
    if(bheight < 100 && flag) {
        ++num;  //  num自增1
        getData(num);
    }