同位素包装布局会形成不规则的排水沟空间

Question

问题

• 对于某些视口宽度，Isotope会在网格项之间形成不规则的装订线。
• 页面重新加载时会发生这种情况。之后，当我调整窗口浏览器的大小时，Isotope有一个很好的行为。

浏览器重新加载内容时的示例（错误的装订线空间）

调整视口大小后的示例（右零排水沟空间）

Here is the codepen example

的Javascript

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

更新

我有一个使用简化HTML .grid-item和imageloaded（）的codepen。 Here it is.

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

.grid-item现在看起来像这样：

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

任何帮助将不胜感激。

Answer 1

最后，我明白了。这个问题是用imagesLoaded()解决的（我在没有安装imagesLoaded库的情况下尝试了它，显然，它没有用。我不知道它是一个分离出同位素的库）。安装完库后，一切正常。

http://codepen.io/aitormendez/pen/YGWoaP

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