2012-04-05 124 views
3

我该如何做到这一点,以便默认情况下,页面上显示6个div元素,并且当用户滚动到页面底部时,还会加载六个div元素?jQuery滚动显示隐藏内容

如果你看到这个example,它有多个div。我最初只需要展示其中的6个,每当用户到达页面的底部时,我就需要再加载6个,直到你'用完'div。

到目前为止,我尝试过试验jQuery无限滚动插件,但它们不适用于我的情况,因为实际上我拥有的元素数量非常有限!

这怎么能用jQuery来完成?提前致谢!

编辑

我认为一个可以在div的其余设置为隐藏(除了第6),并触发加载六点多到达页面底部时的功能。

+0

你应该这样做。触发一个事件,当用户到达底部并且在这个事件中,下一个div被加载。 – 2012-04-05 22:03:09

回答

1

您应该能够使用类似以下内容:

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到支票。您应该将其设置为全局(或闭包)变量,并将其设置为truefalse,具体取决于是否有更多的div要加载。我创建了一个非常简单的例子

1

让我们假设你有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++]); 
     } 
    } 
});