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

Question

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

根据这个问题解决方案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 类的所有内容不可见。如果您正在与另一组块串联工作，那么您可能正在查看错误的组。 .blocks 类的其他一些 CSS 属性没有做任何有用的事情，除非这是从一个更大的项目中摘录的。

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

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

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