同位素和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>

但是在页面加载后有时我会遇到意想不到的问题，因为图像的第二行上升（Chrome中的大部分内容）

或者在更改窗口大小时，边距会添加到项目中

---

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