具有可变高度的内联块元素可以直接堆叠在一起（两列或更多列）

Question

新来的：）

让我们假设你的ul元素里面有许多li元素。 li元素的显示属性是内联块。 Li元素具有固定的宽度，但各种高度。默认情况下，它们从左到右依次相互跟随，然后，当行中没有足够的空间时，它们将向下移动（在最高元素下方）并从左侧继续。但是如果我需要每个底部元素在相应的顶部元素下移动，那么没有空格呢？

这很难说出来，所以最好看看小提琴，以了解我想要实现的目标： default layout，desired layout。 代码很简单，真的：

<div class="container">
    <div class="b1">1</div>
    <div class="b2">2</div>
    <div class="b3">3</div>
    <div class="b4">4</div>
    <div class="b5">5</div>
    <div class="b6">6</div>
</div>

我的问题是：可以在不使用JS的情况下完成吗？我能想到的唯一方法是通过相对定位元素，但它看起来不是正确的方法，因为如果不知道每个元素的高度怎么办？

注意： IE支持应该是IE9及更高版本。重要的是元素的顺序与小提琴中的顺序完全相同（注意每个元素中的数字）。

甚至可以这样做吗？ 任何帮助表示赞赏。提前谢谢。