Как бесконечный свиток с waypoint.js?

Question

Итак, вот что происходит. У меня есть html-документ, называемый «home.html». Он содержит много div, каждый из этих divs - это один пост. У меня также есть index.html, и в нем есть div #content. Содержимое пустое в index.html, но оно заполняется divs в home.html через вызов .load(). Кроме того, используя div: nth-child (-n + 10) в вызове .load, я могу загрузить только первые десять сообщений. Как я могу использовать waypoint.js для добавления бесконечной прокрутки к этому? Так что, когда полоса прокрутки достигает 75% пути к нижней, она загружает следующие 10 divs из home.html.

Answer 1

После того, как вы загрузите 10 элементов на странице, подключите путевую точку jquery, которая вызовет действие.

Первым шагом действия будет отключить маршрутную точку (так что он срабатывает только один раз). Затем загрузите дополнительные данные через ajax и сделайте это на странице. После завершения (через обратный вызов) вы активируете путевую точку, чтобы процесс запустился заново, когда пользователь прокручивается до него.

Ваше приложение должно будет отслеживать, сколько и какие элементы загружены, поэтому ваши запросы ajax запрашивают правильные номера (т.е. 10 загружаются, поэтому следующий запрос должен начинаться с 10 и выбирать 10, затем следует начинать с 20 и выбор 10 и т. Д.).

«75% пути к основанию» легко настраивается в путевой точке. Для этого вы будете использовать «смещение».

Отъезд waypoint documentation

Я поставил элемент DOM, который вызывает мою бесконечную прокрутку под основной сетке, что у меня есть, так как я нагрузить больше контента, он автоматически толкает его вниз.

Answer 2

Я использовал jquery masonry + waypoint js..Но если вы не зарегистрируете путевую точку в обратном вызове каменной кладки, она будет загружать элементы, которые поставляются с вашим вызовом ajax более одного раза. Это мое решение;

//INFINITE SCROLL 
    var $loading = $("#itemsloading"), 
    $footer = $('footer'), 
    opts = { 
     offset: '120%', 
     onlyOnScroll:false 
    }; 

    $footer.waypoint(function(event, direction) { 
     $footer.waypoint('remove'); 
      $loading.toggle(true); 
      $.get($('.more').attr('href'), function(data) { 
       var $data = $(data.result[0]); 
       if($(data.result[0]).length==0){ 
        $loading.toggle(false); 
        return false; 
       } 
       $('#items').append($data).masonry('appended', $data, true, 
         function(){ 
          $footer.waypoint(opts); 
          }); 
       $loading.toggle(false); 
      }); 
    }, opts);