jQuery scroll показать скрытое содержимое

Question

Как сделать так, чтобы по умолчанию на странице отображались 6 элементов div, а когда пользователь прокручивается в нижней части страницы, загружаются еще шесть?

Если вы видите это example, у него есть несколько div. Я хочу, чтобы только 6 из них отображались первоначально, и каждый раз, когда пользователь достигает нижней части страницы, я хочу еще шесть загружать, пока вы не закончите «div».

До сих пор я пытался экспериментировать с бесконечными плагинами прокрутки jQuery, но они не применимы в моем случае, поскольку на самом деле количество элементов, которые у меня есть, очень ограничено!

Как это можно сделать с помощью jQuery? Заранее спасибо!

EDIT

Я считаю, что можно было бы установить остальные дивы в скрытой (кроме первого 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, чтобы сделать его работу к вашему удовлетворению.

EDIT: Я добавил haveDivsToLoad к чеку. Вы должны сделать это глобальной (или закрывающей) переменной и установить ее на true или false в зависимости от того, есть ли больше div s для загрузки.

Answer 3

Давайте предположим, что у вас есть массив дивы каждый инициализируется 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/