0

I've been following this example on jsFiddle: http://jsfiddle.net/jackdent/gRzPF/12/

...to automatically load more content when the user reaches the end of the currently displayed content. Unfortunately the example only seems to work when the .content div has a set height in pixels in the CSS.

How can I achieve the desired result without setting a height? I've got a tonne of information on a single page, broken up into several sections, that I want hidden before the users scrolls to it, at which point it appears.

Been looking at infinite scrolling plugins, but all the examples seem to only be for remote content. I basically need the same thing but for content on the one page. I'm only competent with HTML/CSS, I can insert jQuery and play around with values a little, but am otherwise terrible with it...

jQuery

//Set intital divs to be hidden
$(".content").addClass("noshow");
    var contentNumber = 0;

    function reveal() {
        var constraintNumber = contentNumber + 6;
        //IMPORTANT - DO NOT DELETE
        $(window).trigger('resize');
        //IMPORTANT - DO NOT DELETE
        for (i = contentNumber; i < constraintNumber; i++) {
            //Get the nth div of class content, where n is the contentNumber, and make it shown
            $('.content').eq(contentNumber).removeClass("noshow");
            contentNumber ++;
        }
    }

//Window scroll function
$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height() )
        {
        reveal();
        }
});
reveal();

HTML

<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>
<div class="content">I have some content</div>

CSS

.content {
    margin: 1px;
    width: 200px;
    height: 400px;
    border: 1px solid black;
    float: left;
    background-color: gray;
}

.noshow{
    display: none;
}
4

2 回答 2

0

Set the height to "auto". I tried succesfully in your fiddle after putting some more content into the DIVs.

于 2013-05-06T06:51:58.470 回答
0

即使没有设置高度，它也会滚动。确保有足够数量的具有“内容”类的 div 和 div 内的内容，这些内容将在第一页加载时创建滚动条。

您可以尝试从 css 中删除 float:left

于 2013-05-06T07:54:27.460 回答