jQuery 滾動顯示隱藏內容

Question

我該如何做到默認情況下頁面上顯示 6 個 div 元素，當用戶滾動到頁面底部時，會加載另外六個元素？

如果您看到這個例子，它有多個 div。 我希望最初只顯示其中的 6 個，每次用戶到達頁面底部時，我希望再加載六個，直到你“用完”div。

到目前為止，我已經嘗試使用 jQuery 無限滾動插件進行試驗，但它們不適用於我的情況，因為事實上我擁有的元素數量非常有限！

如何使用 jQuery 完成此操作？ 提前致謝！

編輯

我相信可以將 div 的 rest 設置為隱藏（除了前 6 個），並觸發一個 function，當到達頁面底部時再加載六個。

Answer 1

我創建了一個非常簡單的示例，它沒有通過工作進行優化：

http://jsfiddle.net/gRzPF/2/

Answer 2

您應該能夠使用如下內容：

jQuery( window ).scroll( function( ) {
    var loadHeight = jQuery( document ).height( ) - jQuery( window ).height( );
    if( haveDivsToLoad && jQuery( window ).scrollTop( ) >= loadHeight ) {
        // fire your load function here
    }
} );

您可能需要使用loadHeight來使它的工作令您滿意。

編輯：我在檢查中添加了haveDivsToLoad 。 您應該將其設為全局（或閉包）變量，並根據是否有更多div要加載將其設置為true或false 。

Answer 3

假設您有一個 div 數組，每個 div 都使用document.createElement("div")或類似方法初始化。 讓我們假設你有一大堆。

var myArrayOfDivs = [];//see above
var DivsAdded = 6;//as stated, 6 were already added - index 6 is the 7th element
$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        for(int i = 0; i < 6; i++){
         if( myArrayOfDivs.length < DivsAdded ) break;
         $("#elementToAppendIn").append(myArrayOfDivs[DivsAdded++]);
        }
    }
});

Answer 4

經過一些試驗，我找到了完美的答案：

http://jsfiddle.net/jackdent/gRzPF/12/