24.纯CSS实现瀑布流布局

1.CSS实现瀑布流布局（display: flex）

本例使用 CSS flex 实现瀑布流布局
关键点，横向flex布局嵌套多列纵向flex布局，使用了 vw 进行自适应缩放
html

<!-- 本例使用 CSS flex 实现瀑布流布局 -->
<!-- 关键点，横向flex布局嵌套多列纵向flex布局，使用了 vw 进行自适应缩放 -->

div.g-container
    -for(var i = 0; i<4; i++)
        div.g-queue
            -for(var j = 0; j<8; j++)
                div.g-item

css

$lineCount: 4;
$count: 8;

@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}

@function randomColor() {
    @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

.g-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
}

.g-queue {
    display: flex;
    flex-direction: column;
    flex-basis: 24%;

}

.g-item {
    position: relative;
    width: 100%;
    margin: 2.5% 0;
}

@for $i from 1 to $lineCount+1 {
    .g-queue:nth-child(#{$i}) {
        @for $j from 1 to $count+1 {
            .g-item:nth-child(#{$j}) {
                height: #{randomNum(300, 50)}px;
                background: randomColor();

                &::after {
                    content: "#{$j}";
                    position: absolute;
                    color: #fff;
                    font-size: 24px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}

display: flex

详情:https://codepen.io/Chokcoco/pen/wYgYXX

2.CSS实现瀑布流布局（column-count）

• 本例使用 CSS column 实现瀑布流布局
• 关键点，column-count -- 元素内容将被划分的最佳列数
• 关键点，break-inside -- 避免在元素内部插入分页符

html

<!-- 本例使用 CSS column 实现瀑布流布局 -->
<!-- 关键点，column-count: 元素内容将被划分的最佳列数  -->
<!-- 关键点，break-inside: 避免在元素内部插入分页符  -->

div.g-container
    -for(var j = 0; j<32; j++)
        div.g-item

css

$count: 32;

@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}

@function randomColor() {
    @return rgb(randomNum(25), randomNum(255), randomNum(255));
}

.g-container {
    column-count: 4;
    column-gap: .5vw;
    padding-top: .5vw;
}

.g-item {
    position: relative;
    width: 24vw;
    margin-bottom: 1vw;
    break-inside: avoid;
}

@for $i from 1 to $count+1 {
    .g-item:nth-child(#{$i}) {
        height: #{randomNum(300, 50)}px;
        background: randomColor();

        &::after {
            content: "#{$i}";
            position: absolute;
            color: #fff;
            font-size: 2vw;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }        
}

详情:https://codepen.io/Chokcoco/pen/LgjazE?editors=1100

CSS实现瀑布流布局（display: grid）

本例使用 CSS grid 实现瀑布流布局

• 使用 grid-template-columns、grid-template-rows 分割行列
• 使用 grid-row 控制每个 item 的所占格子的大小

https://codepen.io/Chokcoco/pen/KGXqyo