Jquery isotope 同位素封隔器布局形成不规则的排水沟空间

问题

• 对于某些视口宽度，同位素会在栅格项目之间创建不规则的边沟
• 这在页面重新加载时发生。之后，当我调整窗口浏览器的大小时，同位素具有良好的性能

浏览器重新加载内容时的示例（错误的间距）

调整视口大小后的示例（右零间距）

Javascript

 $(document).ready(function() {
     var $grid = $('.grid').isotope({
       layoutMode: 'packery',
       itemSelector: '.grid-item',
       packery: {
         gutter: 0
       }
     });
 });

更新 我有一个使用简化HTML

.grid item

和imageloaded（）的代码笔

我还没有找到解决方案，但我已经接近了

.grid项

现在如下所示：

<article class="grid-item col-sm-4 col-md-3 col-lg-2 pequena">
    <img width="699" height="466" src="http://stage.lolafonseca.com/app/uploads/2016/08/reforma-3-699x466.jpg" class="img-responsive wp-post-image" alt="reforma-3"/>
  </article>

---

任何帮助都将不胜感激。

终于，我得到了。使用

imagesLoaded（）

解决了这个问题（我在没有安装imagesLoaded库的情况下尝试了它，显然，它不起作用。我不知道它是一个与同位素分离的库）。安装库后，所有操作都正常

$(document).ready(function() {
  var $grid = $('.grid').isotope({
    layoutMode: 'packery',
    itemSelector: '.grid-item',
    packery: {
      gutter: 0
    }
  });
  $grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});
});