Javascript jQuery滚动显示隐藏内容

如何使页面默认显示6个div元素，并且当用户滚动到页面底部时，会再加载6个

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

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

如何使用jQuery实现这一点？提前谢谢

编辑

---

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

您应该能够使用以下内容：

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要加载。

我创建了一个非常快速的示例，它并没有通过以下作业进行优化：

---

假设您有一个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++]);
        }
    }
});

var myArrayOfDivs=[]//见上文
var-DivsAdded=6//如上所述，已经添加了6个元素-索引6是第7个元素
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））{
对于（int i=0；i<6；i++）{
如果（myArrayOfDivs.长度<分段）断裂；
$（“#element to appendin”）.append（myArrayOfDivs[DivsAdded++]）；
}
}
});

经过一点实验，我找到了完美的答案：

---

你应该这样做。当用户到达底部时触发一个事件，在此事件中，加载下一个div。