按行索引的列布局

Question

我的设计如下：

有9个领域，例如。段落，具有相同的宽度和未知的高度（我不能简单地浮动它们）。

我尝试了多列布局，但需要将元素切换到1-4-7-2-5-8-3-6-9。

'工作'HTML是（'工作'在引号中，因为项目的顺序不正确）

<style>
    div {
        -webkit-columns: 3;
           -moz-columns: 3;
                columns: 3;

        -webkit-column-gap: 2px;
           -moz-column-gap: 2px;
                column-gap: 2px;
    }

    p {display: inline-block; width: 200px; margin: 1px}
</style>
<div>
    <p style="background: red; height: 100px">1</p>
    <p style="background: blue; height: 120px">4</p>
    <p style="background: brown; height: 100px">7</p>
    <p style="background: blue; height: 140px">2</p>
    <p style="background: red; height: 80px">5</p>
    <p style="background: yellow; height: 90px">8</p>
    <p style="background: green; height: 90px">3</p>
    <p style="background: brown; height: 140px">6</p>
    <p style="background: pink; height: 120px">9</p>
</div>

https://jsfiddle.net/ey1obeyn/2/

理想的（也是唯一正确的）HTML是：

<div>
    <p style="background: red; height: 100px">1</p>
    <p style="background: blue; height: 140px">2</p>
    <p style="background: green; height: 90px">3</p>
    <p style="background: blue; height: 120px">4</p>
    <p style="background: red; height: 80px">5</p>
    <p style="background: brown; height: 140px">6</p>
    <p style="background: brown; height: 100px">7</p>
    <p style="background: yellow; height: 90px">8</p>
    <p style="background: pink; height: 120px">9</p>
</div>

但结果是https://jsfiddle.net/ey1obeyn/1/。

有没有CSS解决方案？没有用JavaScript计算大小，真的在寻找CSS 感谢。