相信很多人都見過瀑布流圖片布局，那些圖片是動(dòng)態(tài)加載出來的，效果很好，對(duì)服務(wù)器的壓力相對(duì)來說也小了很多，用鼠標(biāo)操作的時(shí)候相信都見過這樣的效果：進(jìn)入qq空間，向下拉動(dòng)空間，到底部時(shí)，會(huì)動(dòng)態(tài)加載剩余的說說或者是日志 ，今天我們就來看看他們的實(shí)現(xiàn)思路和js控制動(dòng)態(tài)加載的代碼。

下面的代碼主要是控制滾動(dòng)條下拉時(shí)的加載事件的，無論是加載圖片還是加載記錄數(shù)據(jù)  都可以。

加載jQuery庫后我們可以這樣使用：  

$(window).scroll(function () {

    var scrollTop = $(this).scrollTop();

    var scrollHeight = $(document).height();

    var windowHeight = $(this).height();

    if (scrollTop + windowHeight == scrollHeight) {

   //此處是滾動(dòng)條到底部時(shí)候觸發(fā)的事件，在這里寫要加載的數(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è)屬性的介紹就可以看出來，滾動(dòng)條到底部的條件即為scrollTop + clientHeight == scrollHeight。 

純js我們可以這樣做： 

window.onscroll = function() { 

   var scrollTop = document.body.scrollTop; 

   var offsetHeight = document.body.offsetHeight; 

   var scrollHeight = document.body.scrollHeight; 

   if (scrollTop == scrollHeight - offsetHeight) { 

    page++; 

    loadList(page); 

   } 

  }; 

function loadList(page) { 

   page = page || 1; 

   if (isLoad) { 

    getJSON('/forum.php?mod=hot&page=' + page).then(function(data) { 

     if (data.code == 200) { 

      data = data.data; 

      if (data && Object.keys(data).length > 0) { 

       for (var k in data) { 

        var v = data[k]; 

        detailTemplate = detailTemplate.cloneNode(true); 

        var userInfoObj = detailTemplate.getElementsByClassName('user-info')[0]; 

        userInfoObj.getElementsByClassName('name')[0].innerText = v.author; 

        userInfoObj.getElementsByClassName('avatar')[0].src = v.avatar; 

        userInfoObj.getElementsByClassName('post-time')[0].innerHTML = v.lastpost; 

        detailTemplate.getElementsByClassName('title')[0].innerText = v.subject; 

        detailTemplate.getElementsByClassName('desc')[0].innerText = v.subject; 

        var extInfoObj = detailTemplate.getElementsByClassName('ext-info')[0]; 

        extInfoObj.getElementsByClassName('from')[0].innerText = v.fname; 

        extInfoObj.getElementsByClassName('view-time')[0].innerText = v.views; 

        postListObj.appendChild(detailTemplate); 

       } 

      } else { 

       isLoad = false; 

      } 

     } else { 

      isLoad = false; 

     } 

    }, function(status) { 

     console.log('Something went wrong, status is ' + status); 

    }); 

   } 

  }