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