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

Question

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

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

示例here。

.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

您可以使用：

node_modules

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重新排列网格，则应触发布局＆＃39;在调整大小之后。可能你应该在调整大小后重新创建整个Masonry对象。在这种情况下，应该有足够的时间重新计算DOM，然后Mosonry会开始触发布局＆＃39;。例如，如果使用ajax调用执行某些服务器端图像轮换，则在成功回调时，应使用setTimeout大约100ms来标识新的DOM布局。我花了两天时间搞清楚。希望有人能用这个小技巧节省时间。 NB：我正在开发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-md-4元素在同位素下应用了.col，所以position: absolute的设置宽度低于中等网格大小。通过添加下面的CSS，我甚至不需要在调整大小时触发layout或reloadItems。

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