同位素Packery布局使得不规则装订线空间

Question

问题

• 对于一些视口宽度，使得同位素网格项目之间的不规则排水沟。
• 页面重新加载时会发生这种情况。之后，当我调整窗口浏览器的大小时，同位素具有良好的行为。

实施例当浏览器重新加载内容（错装订线空间）

实施例调整视后（右零装订线空间）

Here is the codepen example

的Javascript

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

UPDATE

我有一个codepen具有简化的HTML .grid-item工作和imageloaded（）。 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库的情况下，很明显，它没有工作，我不知道它是一个独立于Isotope的库）。安装库后，所有的作品。

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'); 
}); 
});