Jquery頁面滾動動態(tài)加載數(shù)據(jù),頁面下拉自動加載內(nèi)容

相信很多人都見過瀑布流圖片布局，那些圖片是動態(tài)加載出來的，效果很好，對服務(wù)器的壓力相對來說也小了很多 

有手機(jī)的相信都見過這樣的效果：進(jìn)入qq空間，向下拉動空間，到底部時，會動態(tài)加載剩余的說說或者是日志 

今天我們就來看看他們的實現(xiàn)思路和js控制動態(tài)加載的代碼

下面的代碼主要是控制滾動條下拉時的加載事件的

在下面代碼說明出，寫上你的操作即可，無論是加載圖片還是加載記錄數(shù)據(jù)  都可以  

別忘了引用jquery類庫 


<a href="###" class="more" id="redgiftNextPage" currentpage="1"></a>
    Jquery 滾動加載 
$(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop   windowHeight == scrollHeight) {
  
      //此處是滾動條到底部時候觸發(fā)的事件，在這里寫要加載的數(shù)據(jù)，或者是拉動滾動條的操作
  
//var page = Number($("#redgiftNextPage").attr('currentpage'))   1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage', page   1);
  
        }
    });
原理：


判斷滾動條到底部，需要用到DOM的三個屬性值，即scrollTop、clientHeight、scrollHeight。
scrollTop為滾動條在Y軸上的滾動距離。
clientHeight為內(nèi)容可視區(qū)域的高度。
scrollHeight為內(nèi)容可視區(qū)域的高度加上溢出（滾動）的距離。
從這個三個屬性的介紹就可以看出來，滾動條到底部的條件即為scrollTop clientHeight == scrollHeight。（兼容不同的瀏覽器）。


原文鏈接：Js/Jquery滑動頁面滾動條自動加載數(shù)據(jù)