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

相信很多人都見(jiàn)過(guò)瀑布流圖片布局，那些圖片是動(dòng)態(tài)加載出來(lái)的，效果很好，對(duì)服務(wù)器的壓力相對(duì)來(lái)說(shuō)也小了很多 

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

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

下面的代碼主要是控制滾動(dòng)條下拉時(shí)的加載事件的

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

別忘了引用jquery類(lèi)庫(kù) 


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


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


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