js/jquery控制頁面動態加載數據 滑動滾動條自動加載事件--轉他人的

js/jquery控制頁面動態加載數據 滑動滾動條自動加載事件--轉他人的

相信不少人都見過瀑布流圖片佈局，那些圖片是動態加載出來的，效果很好，對服務器的壓力相對來講也小了不少 

有手機的相信都見過這樣的效果：進入qq空間，向下拉動空間，到底部時，會動態加載剩餘的說說或者是日誌 

今天咱們就來看看他們的實現思路和js控制動態加載的代碼

原理：

就是爲 window 添加一個 scroll事件 ，瀏覽器每次觸發 scroll事件 時判斷是否滾動到了瀏覽器底部，若是到了底部則加載新數據。關鍵是計算滾動條是否滾動到了瀏覽器底部，算法以下：

 滾動條捲起來的高度 + 窗口高度 > 文檔的總高度 + 50/*我這裏將滾動響應區域高度取50px*/； 

若是這個判斷爲 true 則表示滾動條滾動到了底部。

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

在下面代碼說明處，寫上你的操做便可，不管是加載圖片仍是加載記錄數據  均可以  

別忘了引用 jquery 類庫

 

 1  $(window).scroll(function () {
 2         var scrollTop = $(this).scrollTop();
 3         var scrollHeight = $(document).height();
 4         var windowHeight = $(this).height();
 5         if (scrollTop + windowHeight == scrollHeight) {
 6 
 7            //此處是滾動條到底部時候觸發的事件，在這裏寫要加載的數據，或者是拉動滾動條的操做
 9            //var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
10            //redgiftList(page);
11            //$("#redgiftNextPage").attr('currentpage', page + 1);

　　　　　　　　var index=$("#my-modal-loading").layer.load('1');//開始加載動畫

                $.ajax({
                    type: 'get',
                    url: 'xxxxxxxxxx',
                    data:{
                        xxx: 'xxx',
                        xxx: xxx
                    },
                    dataType: 'json',
                    error: function(request) {
                        alert('查找失敗！');
                    },
                    success: function(data){
                        //console.log(data);
                        //數據加載

　　　　　　　　　　　　　　//結束加載動畫

　　　　　　　　　　　　　　$("#my-modal-loading").layer.close(index);

　　　　　　　　　　　　}

　　　　　　　　　　　});

13         }
14     });

 

 

 

 

解析：

判斷滾動條到底部，須要用到 DOM 的三個屬性值，即 scrollTop、clientHeight、scrollHeight 。

 scrollTop 爲滾動條在Y軸上的滾動距離。

 clientHeight 爲內容可視區域的高度。

 scrollHeight 爲內容可視區域的高度加上溢出（滾動）的距離。

從這個三個屬性的介紹就能夠看出來，滾動條到底部的條件即爲 scrollTop + clientHeight == scrollHeight 。（兼容不一樣的瀏覽器）。