Infinite Scroll масонства не работает

Question

У меня есть следующий Исходник-:

CSS

.item { float: left;} 

.item.w2 { width: 100px; } 
.item.w3 { width: 200px; } 
.item.w4 { width: 300px; } 

.item.h2 { height: 100px; } 
.item.h3 { height: 200px; } 
.item.h4 { height: 300px; } 

PHP

<?php 
$all = array(); 

$dir = "/www/htdocs/test/test.com/images"; 
chdir($dir); 
array_multisort(array_map('filemtime', ($img = glob("*.*"))), SORT_DESC, $img); 

for($i=0; $i<=count($img)-1; $i++) 
{ 
    $name = $img[$i]; 
    list($wi, $he) = getimagesize($dir . "/" . $name); 

    $all[$i]['url'] = $name; 
    $all[$i]['reso'] = $wi; 
} 
?> 

HTML

<div style="position: absolute; width: 100%;"> 
    <div style="position: relative; width: 100%; background-image: url(http://test.com/images/bg.jpg);"> 
      <div id="gallery-div" style="position: absolute; width: 100%; height: 2500px;"> 
      </div> 
    </div> 
</div> 

<nav id="page-nav"> 
    <a href="http://test.com/gallery.php"></a> 
</nav> 

JAVASCRIPT

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script> 

<script> 
     $("#bg-top").css("height", $(window).height()); 

     var images = <?php echo json_encode($all); ?>; 
     var buffer = ""; 

     // THIS PART PUTS ALL IMAGES INTO THE RIGHT DIVS 
     for(i=0; i<= images.length-1; i++) 
     { 
      var url = "http://test.com/images" + images[i]['url']; 

      if(images[i]['reso']==100) 
      { 
       buffer += "<div class='item w2 h2'><img src='" + url + "'/></div>"; 
      } 

      if(images[i]['reso']==200) 
      { 
       buffer += "<div class='item w3 h3'><img src='" + url + "'/></div>"; 
      } 

      if(images[i]['reso']==300) 
      { 
       buffer += "<div class='item w4 h4'><img src='" + url + "'/></div>"; 
      } 
     } 

     // HERE ALL THE IMAGES WILL BE APPENDED TO #GALLERY-DIV 
     $('#gallery-div').append(buffer); 

$(function(){ 
    var $container = $('#gallery-div'); 

    // THIS WORKS PERFECTLY FINE! 
    // Masonry + ImagesLoaded 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      // selector for entry content 
      itemSelector: '.item', 
      columnWidth: 100 
     }); 
    }); 
    // UNTIL HERE ... 

    // THIS DOES NOT WORK !!! 
    // Infinite Scroll 
    $container.infinitescroll({ 
     // selector for the paged navigation (it will be hidden) 
     navSelector : '#page-nav', 
     // selector for the NEXT link (to page 2) 
     nextSelector : '#page-nav a', 
     // selector for all items you'll retrieve 
     itemSelector : '.item', 

     // finished message 
     loading: { 
      finishedMsg: 'No more pages to load.' 
      } 
     }, 

     // 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); 
      }); 

    }); 
    // UNTIL HERE ... 
}); 
</script> 

И Выход GALLERY.PHP это

GALLERY.PHP

<div class='item'><img src='http://www.lessons4living.com/images/penclchk.gif'/></div> 
<div class='item'><img src='http://www.lessons4living.com/images/penclchk.gif'/></div> 

Что я хочу иметь в настоящее время является бесконечной прокрутки функции. Когда я прокручу вниз до нижней части страницы, должно появиться содержимое GALLERY.PHP, но это не так. Все остальное работает отлично, значит также функция MASONRY для заказа изображений. Единственное, что не работает, это бесконечный свиток. Когда я прокручиваю низу, ничего не происходит.

Answer 1

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

Если включить бесконечный свитка отладки (Debug: истина), вы должны увидеть это сообщение:

Sorry, we couldn't parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com.

я узнал, что эта версия требует номер страницы в быть следующей странице URL, чтобы проанализируйте его правильно (затем он вычисляет на следующем номере страницы). Таким образом, в вашей следующей странице URL вы должны иметь что-то вроде этого:

<nav id="page-nav"> 
    <a href="http://test.com/gallery.php?page=2"></a> 
</nav> 

Там способ обойти, если вы хотите контролировать свой постраничной схему, посмотрите на этот комментарий: https://github.com/infinite-scroll/infinite-scroll/issues/190#issuecomment-9532922