Isotope/Masonry 图片在调整大小时重叠

Question

我正在使用 bootstrap 和同位素来创建可过滤的响应网格，但是，我的图像在调整大小时会重叠。我正在使用 DeSandro 的 imagesLoaded，这样图像就不会在加载时重叠。

调整下面示例的大小将使 .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

您可以使用：

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

Answer 2

我的问题最终是因为 .col-md-4 上没有设置低于中等网格大小的宽度，因为 .col 元素得到同位素应用的 position: absolute。通过在下面添加 CSS，我什至不需要在调整大小时触发 layout 或 reloadItems。

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

Answer 3

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

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

  // content here

</div>

Answer 4

$("#isotope").masonry().masonry("reloadItems"); 通常在将项目附加到网格时使用。当你调整图像大小时，如果你使用 Masonry 重新排列网格，你应该在调整大小后触发 'layout'。调整大小后，您可能应该重新创建整个 Masonry 对象。在那种情况下，应该有足够的时间在 Mosonry 对象开始触发 'layout' 之前重新计算 DOM。例如，如果您使用 ajax 调用进行一些服务器端图像旋转，在成功回调时您应该使用 setTimeout 大约 100 毫秒来识别新的 DOM 布局。我花了两天时间弄明白了。希望有人会使用这个小技巧来节省时间。 注意：我正在做一个 Raspberry pi 项目。 Jquery + Bootstrap + Python flask 服务器上的 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);

Isotope/Masonry 图片在调整大小时重叠

Isotope/Masonry images overlapping on resize

javascript

twitter-bootstrap

jquery-isotope

masonry