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/