imagesLoadedメソッドがJQueryの石積みと無限のスクロールで動作しない

Question

私はJQueryの石積みを使用していましたが、今は無限のスクロールを追加しています。ほぼすべての石積み「レンガ」に画像があり、無限のスクロールを使用する前に、画像はうまく読み込まれ、すべてが素晴らしかったです。私は無限のスクロールのjavascriptの次の部分を追加し、内部にimagesLoadedメソッドを追加しましたが、新しいレンガが追加されると、それらはすべて上に積み重なります。私の前提は、無限スクロールコールバックでimagesLoadedメソッドを正しく追加していないが、私のエラーを見つけることができなかったということです。コードは次のとおりです

<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> 

最初のJQueryの石工呼び出しがうまくいき、触れられていません。それは問題があるように見える第二の部分です。助けてくれてありがとう、もっと情報が必要な場合はお知らせください。

Answer 1

ここでの問題は、私は無限スクロールコールバック関数に$コンテナに.imagesLoaded（）を呼んでいたと私は$されたnewElementsにそれを呼び出すされているはずだった答え

$(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); 
      }); 
      } 
     ); 
    }); 

です。