vue项目中，flex+高级scss语法实现瀑布流布局

<template>
  <!-- 关键点，横向 flex 布局嵌套多列纵向 flex 布局 -->
  <div class="g-container">
    <div v-for="i in 4" :key="'queue'+i" class="g-queue">
      <div v-for="j in 8" :key="'item'+j" class="g-item" />
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='scss'>
$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%);
                }
            }
        }
    }
}

</style>