column实现瀑布流布局

发表于

一、属性

  • column-count: 最理想的分栏数目
  • column-gap: 栏目之间的水平间隙
  • column-rule: 分割线，形式规则什么的等同于border
  • break-inside: 内容盒子如何中断 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*瀑布流层*/

.waterfall {
    column-count: 4;
    column-gap: 1em;
}


/*一个内容层*/

.item {
    padding: 1em;
    margin: 0 0 1em 0;
    break-inside: avoid;
    border: 1px solid #000;
}


.item img {
    width: 100%;
    margin-bottom: 10px;
}
1
2
3
4
5
6
<div class="waterfall">
    <div class="item">
        <img src="https://imgsa.jpg">
        <p>1 convallis timestamp</p>
    </div>
</div>