首頁 > web前端 > js教程 > 使用jQuery或原生js實作滑鼠滾動載入頁面新資料_jquery

使用jQuery或原生js實作滑鼠滾動載入頁面新資料_jquery

WBOY
發布: 2016-05-16 15:11:57
原創
2001 人瀏覽過

相信很多人都看過瀑布流圖片佈局,那些圖片是動態載入出來的,效果很好,對伺服器的壓力相對來說也小了很多,用滑鼠操作的時候相信都看過這樣的效果:進入qq空間,向下拉動空間,到底部時,會動態載入剩餘的說說或是日誌,今天我們就來看看他們的實作思維和js控制動態載入的程式碼。

下面的程式碼主要是控制捲軸下拉時的載入事件的,無論是載入圖片還是載入記錄資料  都可以。

載入jQuery函式庫後我們可以這樣使用:  

 $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight == scrollHeight) {

   //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作

//var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage', page + 1);

    }
  });

登入後複製

解析:

判斷捲軸到底部,需要用到DOM的三個屬性值,即scrollTop、clientHeight、scrollHeight。

  • scrollTop為滾動條在Y軸上的滾動距離。
  • clientHeight為內容視覺區域的高度。
  • scrollHeight為內容視覺區域的高度加上溢出(滾動)的距離。

從這個三個屬性的介紹就可以看出來,滾動條到底部的條件即為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); 
    }); 
   } 
  }
登入後複製

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板