imagesLoaded método no funciona con JQuery mampostería y desplazamiento infinito

Question

He estado usando mampostería JQuery y ahora estoy agregando scroll infinito. Hay imágenes en casi todos los "ladrillos" de mampostería y antes de usar el scroll infinito las imágenes cargaban bien y todo fue genial. Agregué la siguiente parte del javascript para el desplazamiento infinito y agregué el método imagesLoaded en el interior, pero cuando se añaden los nuevos ladrillos salen todos amontonados en la parte superior. Mi suposición es que no estoy agregando el método imagesLoaded correctamente en la devolución de llamada de desplazamiento infinito, pero no he podido encontrar mi error. Aquí está el código

<script type="text/javascript"> 
    $(function(){ 
     var $container = $('#container'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : '.tile', 
      columnWidth : 240 
      }); 
     }); 


    var $container = $('#container'); 
    $container.infinitescroll({ 
     navSelector : ".flickr_pagination",    
         // selector for the paged navigation (it will be hidden) 
     nextSelector : "a.next_page",  
         // selector for the NEXT link (to page 2) 
     itemSelector : "div.tile"   
         // selector for all items you'll retrieve 
     }, 
     // trigger Masonry as a callback 
     function(newElements) { 
     var $newElems = $(newElements); 

     $container.imagesLoaded(function() { 
      masonry('appended', $newElems); 
     }); 
     } 
    ); 
    }); 
</script> 

La primera llamada de albañilería JQuery funciona bien y no se ha tocado. Es la segunda parte donde parece haber un problema. Gracias por la ayuda y avíseme si necesita más información.

Answer 1

Aquí está la respuesta

$(function(){ 

     var $container = $('#container'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : '.tile', 
      columnWidth : 240 
      }); 
     }); 

    $container.infinitescroll({ 
      navSelector : '.flickr_pagination', // selector for the paged navigation 
      nextSelector : 'a.next_page', // selector for the NEXT link (to page 2) 
      itemSelector : '.tile',  // selector for all items you'll retrieve 
      loading: { 
       finishedMsg: 'No more pages to load.', 
       img: 'http://i.imgur.com/6RMhx.gif' 
      } 
      }, 
      // 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); 
      }); 
      } 
     ); 
    }); 

El problema era que estaba llamando .imagesLoaded() en $ contenedores en la función de devolución de llamada de desplazamiento infinito y que debería haber estado llamando en $ newElements.