javascript - 不同顺序的列

Question

我正在尝试使用 CSS“列”属性重新创建一种画廊布局。

但是我遇到了两个问题:

• 列没有填满容器，出于某种原因我总是得到 n-1 列
• 顺序是 1-4-7、2-5-8、3-6-9，我想要 1-2-3、4-5-6、7-8-9

对于第二个问题，我认为我可以使用 javascript 对 HTML 代码中的元素重新排序，但是我如何确定必须移动哪些元素以及移动到哪里？

有什么想法吗？

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;    
}

columns{
    display: block;
    -webkit-columns: 4;
    -webkit-column-gap: 10px;
    width: 400px;
    margin: 0 auto;
    background: blue;        
}

div{
    background: pink;
    margin-bottom: 10px;
}

#d5{
    height: 43px;
}

<columns>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div id="d5">5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</columns>

Answer 1

仅当元素具有相同高度时才有效 正如 OP 指出的那样，不是这种情况。

您不需要为此使用 -webkit-columns。你可以做类似的事情

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

columns {
    display: block;
    width: 400px;
    margin: 0 auto;
    background: blue;
}
    /* clear fix */
    columns:after {
        content: "";
        display: table;
        clear: both;
    }

/* the float takes care of collapsing white space between elements 
    132 = (400 - 2 x 2 [margins]) / 3 [columns] 
*/
div {
    float: left;
    display: block;
    background: pink;
    width: 132px;
    margin-right: 2px;
}
    /* we don't need right margins for the last column */
    div:nth-of-type(3n) {
        margin-right: 0;
    }

也不需要 JavaScript!

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    columns {
      display: block;
      width: 400px;
      margin: 0 auto;
      background: blue;
    }
    /* clear fix */
    columns:after {
      content: "";
      display: table;
      clear: both;
    }
    /* the float takes care of collapsing white space between elements 
        132 = (400 - 2 x 2 [margins]) / 3 [columns] 
    */
    div {
      float: left;
      display: block;
      background: pink;
      width: 132px;
      margin-right: 2px;
    }
    /* we don't need right margins for the last column */
    div:nth-of-type(3n) {
      margin-right: 0;
    }

<columns>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</columns>