瀑布流布局之columns属性

columns 属性是一个速记属性设置列宽和列数。
columns 是 column-width 与 column-count 的简写属性。

<template>
  <div class="app-container">
    <div class="g-container">
      <div v-for="item in 32" :key="item" class="g-item">div>
    div>
  div>
template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {},
};
script>

<style lang="scss" scoped>
$count: 32;

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

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

.g-container {
  // columns: 100px 3;  // 每列至少100px 小于则列数相应减少
  column-count: 4;  // 列数
  column-gap: 10px; // 列间距
  padding-top: 0.5vw;
}

.g-item {
  position: relative;
  margin-bottom: 10px;
  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%);
    }
  }
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60