Isotype和Bootstrap流體網格

Question

我需要使用縮略圖構建產品組合。圖像必須放在全角屏幕上，並且其數量必須根據屏幕的寬度而變化（響應）。這就是爲什麼我使用Bootstrap 3及其網格系統。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3 col-sm-4 col-xs-6 item itemShow"> 
      <img src="http://lorempixel.com/600/400/abstract/1" alt="" /> 
     </div> 
     <div class="col-md-3 col-sm-4 col-xs-6 item itemShow"> 
      <img src="http://lorempixel.com/600/400/abstract/2" alt="" /> 
     </div> 
     ... 
    </div> 
</div> 

但頁面加載後，我有時會有意想不到的問題，因爲圖像的第2線（在Chrome中最ofter）上升

或同時改變窗口大小的利潤率將被添加到項目

---

的JavaScript代碼如下所示：

$('#isotopeContainer').isotope({ 
    itemSelector: '.item', 
    filter: '.itemShow' 
}); 

---

影響可以在這裏找到：http://templates.silversite.pl/test/

Answer 1

請參閱該文檔How do I fix overlapping item elements?

如果您的佈局有圖片，你可能需要使用imagesLoaded。

我也建議中$(document).ready()

$(document).ready(function() { 
    $('#isotopeContainer').isotope({ 
     itemSelector: '.item', 
     filter: '.itemShow' 
    }); 
});