砌体+无限滚动+ WordPress

Question

我对此进行了广泛的研究，但仍然无法使用WordPress和Infinite Scroll进行砌体工作。我对jQuery很新，所以我不确定我错过了什么。

我正在使用Masonry和Infinite Scroll处理WordPress主题。首次加载页面时，砌体工作正常，但是当我开始滚动时，新的附加项目不遵循砌体布局。 （见下图）

在页面加载时 - 砌体工作

追加新项目 - 砌体破碎

如何在砌体布局中正确加载附加项目？

这是我的代码。

使用的脚本

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

HTML

<main id="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item"><article>...</article></div>
  <div class="grid-item"><article>...</article></div>
  <div class="grid-item"><article>...</article></div>
  <div class="grid-item"><article>...</article></div>
  <div class="grid-item"><article>...</article></div>
  ...
</main>

CSS

.grid-sizer,
.grid-item { width: 20%; }

jQuery脚本

/**
* Infinite Scroll + Masonry + ImagesLoaded
*/
(function() {

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

// Masonry + ImagesLoaded
$container.imagesLoaded(function(){
  $container.masonry({
      itemSelector: '.grid-item',
      columnWidth: '.grid-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 : ".nav-previous a",
  // selector for all items you'll retrieve
  itemSelector : ".grid-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 );
    });
});

/**
 * OPTIONAL!
 * Load new pages by clicking a link
 */

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

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

感谢帮助。提前谢谢！