Infinite Scroll + Masonry loading все элементы

Question

Я пытаюсь настроить масонство с бесконечным прокруткой, он работает, но в настоящее время он загружает все предметы, а затем, когда я нажимаю на ссылку следующей страницы, он снова загружает их все.

Nav:

<div class="more" id="navigation"> 
    <a href="./?page=2">MORE IDEAS</a> 
</div> 

JS:

$(document).ready(function() { 

     (function() { 

      // Main content container 
      var $container = $('.grid'); 

      // Masonry + ImagesLoaded 
      $container.imagesLoaded(function(){ 
       $container.masonry({ 
        itemSelector: '.grid-item', 
        columnWidth: '.grid-sizer', 
        gutter: '.gutter-sizer', 
        percentPosition: true 
       }); 
      }); 

      // Infinite Scroll 
      $container.infinitescroll({ 

       // selector for the paged navigation (it will be hidden) 
       navSelector : "#navigation", 
       // selector for the NEXT link (to page 2) 
       nextSelector : "#navigation a", 
       // selector for all items you'll retrieve 
       itemSelector : ".grid-item", 

       }, 

       // Trigger Masonry as a callback 
       function(newElements) { 
        // hide new items while they are loading 
        var $newElems = $(newElements).css({ opacity: 0 }); 
        // ensure that images load before adding to masonry layout 
        $newElems.imagesLoaded(function(){ 
         // show elems now they're ready 
         $newElems.animate({ opacity: 1 }); 
         $container.masonry('appended', $newElems, true); 
        }); 

      }); 

      // Pause Infinite Scroll 
      $(window).unbind('.infscr'); 

      // Resume Infinite Scroll 
      $('.more a').click(function(){ 
       $container.infinitescroll('retrieve'); 
       return false; 
      }); 

     })(); 

    }); 

Содержание:

<div class="grid"> 
    <div class="grid-sizer"></div> 
    <div class="gutter-sizer"></div> 
    <div class="grid-item">Item 1</div> 
    <div class="grid-item">Item 2</div> 
    <div class="grid-item">Item 3</div> 
    <div class="grid-item">Item 4</div> 
    <div class="grid-item">Item 5</div> 
    <div class="grid-item">Item 6</div> 
</div> 

В настоящее время он загружает все элементы, от 1 до 6, а затем, когда я нажимаю Load кнопку Дополнительно она снова загружает элементы с 1 по 6. Я рассмотрел пару других вопросов, которые похожи на это, но это разные обстоятельства. Это, наверное, что-то простое, любая помощь была бы наиболее оценена.

Answer 1

Выяснил это.

Вам необходимо взять часть содержимого, которое вы хотите загрузить, и поместить его на другую страницу html. Затем вам нужно настроить ссылку навигации на эту страницу. Поскольку он был просто установлен на? Page = 2, он просто загружал одну и ту же страницу снова.