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

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

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

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

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

原理：

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

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

如果這個判斷為 true 則表示滾動條滾動到了底部。

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

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

別忘了引用 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);

　　　　　　　　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);

　　　　　　　　　　　　}

　　　　　　　　　　　});

        }
    });

 

 

 

 

解析：

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

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

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

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

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