jquery - 使用 Masonry jQuery 内联的不同高度列不起作用

Question

我有多个 div 在我的页面上创建网格图案。每个 div 的宽度都使用 bootstrap 设置为相同，在这种情况下，添加类“col-md-3”以使页面宽度各占 25%。每个 div 的高度为 400px 或 800px。这是我遇到问题的地方。

根据这个问题，解决方案 5 是我需要做的才能达到所需的效果:Bootstrap row with columns of different height

我已经按照第二个演示进行操作，但我没有错误，而且我的网格模式中仍然存在偏移量，有人可以提供建议吗？

我注意到每个 div 都添加了绝对位置，他是让它们层叠在一起而不是在网格中？

<div class="blockOut row">
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks tall">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks tall">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks short">
    </div>
</div>

.blockOut {
    margin-top: 7.5vh;
}

.blocks {
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s ease-in-out;
}

$( document ).ready(function() {
    $('.row').masonry({
      itemSelector : '.col-md-3'
   });
});

Answer 1

在您的代码中，display:none; 将使带有 .blocks 类的所有内容不可见。如果您正在与另一组 block 联机工作，则您可能看错了组。您的 .blocks 类的其他一些 CSS 属性没有做任何有用的事情，除非这是从一个更大的元素中摘录的。

我还在演示中看到了 .row 类的一些自定义 CSS，尽管您在模板中使用了该类，但您并未在此处包含这些内容。 background-clip: content-box; 属性防止 block 重叠。

.row [class*='col-'] {
  background-color: #cceeee;
  background-clip: content-box;
  min-height: 200px;
  margin-bottom: 24px;
}

否则，您提供的代码会为我正确呈现。