仅CSS布局，例如砌体

Question

问题：

有没有办法在没有JS的情况下使布局像 一样从左到右砌筑？

！请注意，我不需要砌石，它的工作方式有些不同！

必填：

1. 从左到右的顺序；
2. 每个项目转到下一列（如果较高位置上有可用空间，则砌筑中的项目可能会乱堆选择列）
3. 高度不固定；
4. 我无法更改原始顺序（ 1,2,3 ...但不能更改1,4,7 ... ）。

示例：

这个解决方案几乎是我要寻找的，但是顺序被破坏了-example

HTML：

<div class="masonry">
   <div class="item">1. (should be #1) ...</div>
   <div class="item">2. (should be #4) ...</div>
   <div class="item">3. (should be #7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
   <div class="item">4. (should be #2) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
   <div class="item">5. (should be #5) Lorem ipsum dolor sit asonsfd foindfosindf met, consectetur adipisicing elit.</div>
   <div class="item">6. (should be #8) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
   <div class="item">7. (should be #3) Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item">8. (should be #6) Lorem ipsum adipisicing elit. Lorem ipsum dolor sit elit</div>
   <div class="item">9. (should be #9) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>
</div>

CSS：

body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}

.wrapper {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    text-align:left;
    font-size: .85em;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}

Answer 1

订购html div时，您必须有所不同。 如果在一张纸上绘制网格，则可以在列周围绘制圆环，然后得到：

您想要这个：

1、2、3

4、5、6

7、8、9

您必须像这样订购：

1、4、7

2、5、8

3，6，9

只需将html行从列到行重新排序，就像这样：

<div class="masonry">
    <div class="item">1. (should be #1) ...</div>

    <div class="item">4. (should be #2) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>

    <div class="item">7. (should be #3) Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>

    <div class="item">2. (should be #4) ...</div>

    <div class="item">5. (should be #5) Lorem ipsum dolor sit asonsfd foindfosindf met, consectetur adipisicing elit.</div>

    <div class="item">8. (should be #6) Lorem ipsum adipisicing elit. Lorem ipsum dolor sit elit</div>

    <div class="item">3. (should be #7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

    <div class="item">6. (should be #8) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>

    <div class="item">9. (should be #9) Lorem ipsum dolor sit amet, consectetur adipisicing. elit</div>

</div>