傑基爾及同位素 - 後圖像越來越截止

Question

我一直在使用傑基爾爲我的個人網站，而現在，我喜歡它，但最近我決定改變了看上去有點。我使用Jekyll /液體功能在主頁上顯示與每個項目/文章相關的預覽圖像，然後鏈接到各自的完整文章。我想使用Isotope將所有這些預覽圖像很好地放在頁面上。

以下同位素的文檔，我得到了運行腳本，但我的圖片一直被截斷。正如我所說的，我希望他們能夠融合在一起，俄羅斯方塊風格，填滿頁面。

他們只是測試圖像現在，和邊框周圍僅用於調試目的。所有的代碼是available on github瀏覽。

任何幫助非常感謝。謝謝！

Answer 1

同位素文檔提供了答案：你需要使用imagesLoaded插件。該插件將等待加載同位素，直到之後圖像已經加載（並且因此已經設置了容器的高度）。

同位素文檔頁面here。

下載並調用該插件，然後改變你的同位素調用類似（從文檔）：

var $container = $('#container'); 

$container.imagesLoaded(function(){ 
    $container.isotope({ 
    // options... 
    }); 
}); 

另外，如果圖像都是相同的高度，你很可能設置的高度圖像容器與CSS。