imagesLoaded方法不适用于JQuery石工和无限滚动

我一直在使用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砌体调用工作正常，没有被触及。这是第二部分，似乎有问题。感谢您的帮助，如果您需要更多信息，请告诉我。

最佳答案

这就是答案

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

问题是我在无限滚动回调函数中的$ container上调用.imagesLoaded()，我应该在$ newElements上调用它。

关于imagesLoaded方法不适用于JQuery石工和无限滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9766515/