在调整大小时，同位素/砌体图像重叠

Question

我正在使用bootstrap和isotope来创建一个可过滤的响应网格，但是，我的图像在调整大小时会重叠。 我正在使用DeSandro的imagesLoaded，以便图像在加载时不会重叠。

调整以下示例的大小将使.col-md-4 div重叠。 知道为什么会这样吗？

这里的例子。

.col-md-4项目重叠：

我有以下HTML：

<div class="container">

  <div id="isotope" class="row">

    <div class="item col-md-8">

      <img class="img-responsive" src="http://lorempixel.com/820/315">

    </div>

    <div class="item col-md-8">

      <img class="img-responsive" src="http://lorempixel.com/820/315">

    </div>

    <div class="item col-md-8">

      <img class="img-responsive" src="http://lorempixel.com/820/630">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="http://lorempixel.com/410/315">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="http://lorempixel.com/410/316">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="http://lorempixel.com/410/317">

    </div>

  </div>

</div>

这是我的JS：

var isotope = $("#isotope").isotope({
  // options
  itemSelector: '.item',
  masonry: {
    columnWidth: '.col-md-4'
  }
});

isotope.imagesLoaded(function() {
  isotope.isotope('layout');
});

Answer 1

您可以使用：

$(window).resize(function(){
   $("#isotope").masonry().masonry("reloadItems");
});

Answer 2

除了div类中的col-md-4和col-md-8之外，还要使用col-xs-12。 这告诉同位素图像应该是大小并阻止它们重叠。

<div class="col-xs-12 item col-md-8">

  // content here

</div>

Answer 3

$("#isotope").masonry().masonry("reloadItems"); 通常在将项目附加到网格时使用。 调整图像大小时，如果使用Masonry重新排列网格，则应在调整大小后触发“布局”。 可能你应该在调整大小后重新创建整个Masonry对象。 在这种情况下，应该有足够的时间在Mosonry对象开始触发“布局”之前重新计算DOM。 例如，如果使用ajax调用执行某些服务器端图像轮换，则在成功回调时，应使用setTimeout大约100ms来标识新的DOM布局。 我花了两天时间搞清楚。 希望有人能用这个小技巧节省时间。 注意：我正在开发一个Raspberry pi项目。 Python烧瓶服务器上的Jquery + Bootstrap + Masonry。

// do your resizing stuff ...
setTimeout(function(){
    $('.img-panel').masonry({
        itemSelector: '.grid-item', // the grid item selector
        percentPosition: true // according to your needs
    }).masonry("layout");
}, 100);

Answer 4

由于.col元素得到一个position: absolute应用于同位素，我的问题最终是由于.col-md-4的设定宽度低于中等网格大小。 通过添加下面的CSS，我甚至reloadItems在调整大小时触发layout或reloadItems 。

// Col SM
@media (max-width: $screen-md-min) {
  .item {
    width: 100%;
  }
}