無窮滾動（Infinite scroll）的實現原理

1 無窮滾動（無限加載）與分頁的比較

現在越來越多的網站或者博客的列表頁開始拋棄傳統的分頁技術，大致的原因在於，分頁明顯地增加了用戶的操作行為以及頁面加載等待的時間，而網頁瀏覽者往往沒什么耐心。

而無窮滾動提供給了讀者一種沉浸式的閱讀體驗。新版的Yahoo.com亦開始擁抱這一技術。

2 無窮滾動的實現原理

(1) 設置存在內容的一個容器“container”，這個容器就放着內容列表；

(2) 設置計時器或者$(window).scroll()事件，計算容器“container”的高度 與 $(window).height()和$(window).scrollTop()之和 的大小關系；

(3) 當前者小於后者時，通過ajax，將新內容append到容器“container”。

3 核心代碼演示

$(document).ready(function () {
            var container = $('容器'); // 獲取容器
            var i = 0; // 分頁值，用於select記錄時給limit賦值
            $(window).scroll(function () {
                var containerHeight = container.height() + 121; // 容器高度 + 容器top至文檔top的距離
　　　　　　　　   var distance = $(window).height() + $(window).scrollTop(); // 視口高度 + 滾動距離
                if (containerHeight <= distance) {
                    $.ajax({
                        type: 'post',
                        url: "控制器/方法",
                        data: {i: i},
                        success: function (data) {
                            i++; // 分頁值+1
                            $.each(data, function (i, n) {
                             　　　// 數據處理代碼
                                container.append('新內容'); // append新內容
                            });
                        }
                    });
                }
            });
        });

4 生產環境代碼推薦

當然，上述代碼只是闡述了無窮滾動的實現原理，生產環境推薦infinite-scroll