css - 如何仅使用 bootstrap 3 网格系统和 css 创建 masonry 效果

Question

我的问题是我想使用 bootstrap 3 网格系统以 block 格式显示数据，但是我不希望从高度限制到上一行时出现烦人的空白间隙。例如，如果我这样做:

<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">longer post that is going to take more height than the others</div>
    <div class="col-lg-4">post</div>
</div>
<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
</div>

然后我将在两行之间留下空白，我想要实现的是仅使用 CSS 的 masonry 效果(后填充位于其上方的帖子附近)，特别是 bootstrap 3 网格系统。即:

我知道这可以用 plugins 来完成但我想看看是否有更纯粹的(即使它必须是 hacky)解决方案。有什么想法吗？

Answer 1

我们在网站上做了这个，我们所做的是将网格放在垂直行中。

例子:

<div class="row">
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
<div>