javascript - jQuery滚动显示隐藏内容

Question

如何使默认情况下页面上显示 6 个 div 元素，并且当用户滚动到页面底部时，又加载了 6 个？

如果你看到这个例子，它有多个 div。我希望最初只显示其中的 6 个，并且每次用户到达页面底部时，我希望再加载 6 个，直到您“用完” div。

到目前为止，我已经尝试过使用 jQuery 无限滚动插件，但它们不适用于我的情况，因为事实上我拥有的元素数量非常有限！

这如何使用 jQuery 来完成？提前致谢！

编辑

我相信可以将其余的 div 设置为隐藏（除了前 6 个），并触发一个函数，当到达页面底部时再加载 6 个。

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到支票。您应该将其设为全局（或闭包）变量并将其设置为true或false取决于是否有更多div的 s 要加载。

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/