CSS布局 - 浮动：......起来？

Question

是否有一种技术（编纂或hacky）来获得浮动块以向上填充以及它们的浮动方向。

这就像 -

变为

我意识到这是通过像Masonry这样的javascript库完成的。

只是想知道是否有任何CSS方法来实现这个或类似的东西。

相关代码 https://codepen.io/2nj2nu7p9oVLGXKS4tIpu8eILcmoXg/pen/QOdmqw

body * {
    box-sizing: border-box;
}

.wrapper {
    max-width: 500px;
    background: limegreen;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.block {
    height: 100px;
    background: lightblue;
    width: 250px;
    float: left;
    border: solid 2px;

    &:nth-child(even) {
        background: blue;
        height: 150px;
    }
}

Answer 1

我只是制作了任何浅蓝色（奇数）元素float: left和任何蓝色（偶数）元素float: right

这看起来如何：

body * {
  box-sizing: border-box;
  float: left;
}

.wrapper {
  max-width: 500px;
  background: limegreen;
}

.block {
  height: 100px;
  background: lightblue;
  width: 250px;
  border: solid 2px;
  vertical-align: top;
}

.block:nth-child(even) {
  float: right;
  background: blue;
  height: 150px;
}

<div class="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>