js實現移動端無限加載分頁

原理：當滾動條到達底部時，執行下一頁內容。

判斷條件需要理解三個概念：
    1.scrollHeight 真實內容的高度
    2.clientHeight 視窗的高度，即在瀏覽器中所能看到的內容的高度
    3.scrollTop 視窗上面隱藏掉的部分，即滾動條滾動的距離

思路：
    1.使用fixed定位加載框
    2.使用$(window).scroll();方法來觸發是否加載
    3.通過 真實內容高度 - 視窗高度 - 上面隱藏部分 < 10 ,作為加載觸發的條件

代碼樣例

        var page=1; //當前頁的頁碼
           var flagNoData = false; //false

        var allpage; //總頁碼，會從后台獲取
        function showAjax(page){
            $.ajax({
                url:"",
                type:"",
                data:"",
                success:function(data){
                    //要執行的內容
                    showContent();
                       if(page>=data.allpage){ //當前頁碼大於等於總頁碼
                        flagNoData = true;
                       };
                    page+=1;    //頁數加1
                }
            })
        }
        function scrollFn(){
            //真實內容的高度
            var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
            //視窗的高度
            var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
            //隱藏的高度
            var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
               if(falgNoData){ //數據全部加載完了
                 return;
               }else if(pageHeight - viewportHeight - scrollHeight < 10){    //如果滿足觸發條件，執行
                showAjax(page);
            }
        }
        $(window).bind("scroll",scrollFn);    //綁定滾動事件