一、需求

很多时候为了实现瀑布流去使用js计算或者第三方插件反而增加了难度，强大的 Grid 布局便可以轻松实现这一点

二、直接上代码

html 元素结构

<div class="list">
  <div class="grid-item" v-for="(item, index) in list" :key="index">
    <div class="item-img" v-if="item.img">
       <n-image :src="item.img" />
    </div>
    <div class="item-main">
      <div class="title">{{ item.name }}</div>
      <div class="time">{{ item.date }}</div>
      <n-rate class="rate" readonly :default-value="5" :size="14" />
      <div class="main-text">{{ item.text }}</div>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

CSS代码

.list {
  display: grid;
  column-gap: 10px; // 每列间隔
  grid-auto-rows: 5px; // 设置每一行的高度
  grid-template-columns: repeat(5, 1fr); // 5列布局，每列等宽
  align-items: start; // 让子级不会被自动拉伸
  justify-content: space-between;
    .grid-item {
      background: #fff;
      border-radius: 2px;
      overflow: hidden;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

JS代码

// 模拟数据
const list = ref([
    {
      name: 'Kimberly H.',
      date: '2023/7/26',
      text: 'Great fit, fast shipping, a perfect experience!',
      img: 'https://images.loox.io/uploads/2023/8/9/ziNoIJigwcf.jpg'
    },
    {
      name: 'Kimberly H.',
      date: '2023/7/26',
      text: 'This jersey is BEAUTIFUL and great quality. It went beyond my expectations. I ordered it at the last minute and was afraid it wouldn’t arrive in time due to shipping time frame. They offered expedited shipping and was still able to get it to me well before I needed it. I would definitely order again from this company.',
      img: 'https://images.loox.io/uploads/2022/8/15/NJ-X-SofC2.jpg'
    },
    {
      name: 'Kimberly H.',
      date: '2023/7/26',
      text: 'Needed some basketball jerseys and came across these. They fit perfect and have worked great for me. I would suggest buying these. Great price as well.',
      img: 'https://images.loox.io/uploads/2022/1/22/EkRkNcETj.jpg'
    },
    {
      name: 'Kimberly H.',
      date: '2023/7/26',
      text: 'Good fit. Seems to be made well with quality material. Color was as expected.',
      img: 'https://images.loox.io/uploads/2022/1/22/EkWR1N94pi.jpg'
    },
    {
      name: 'Kimberly H.',
      date: '2023/7/26',
      text: 'The jerseys not only look great but they are very very fit when it comes to catching a ball. Also the quality is very good. 5 stars for a quality product and a company that stands by their product and offers exceptional service.',
      img: 'https://images.loox.io/uploads/2022/1/22/Eyl0y49N6s.jpg'
    },
    {
      name: 'Kimberly H.',
      date: '2023/7/26',
      text: 'i love them',
      img: ''
    },
    {
      name: 'Kimberly H.',
      date: '2023/7/26',
      text: 'I very much value the speed and accuracy of your order processing - especially the design stage. I ve used you for the last 3 years and look forward to next year s order!',
      img: ''
    }
])

let imgCount = 0
onMounted(() => {
  nextTick(()=> {
    // 如果有图片的瀑布流，需要等所有图片加载完成后再执行
    const imgDomList = document.querySelectorAll('.grid-item .item-img img')
    if (imgDomList?.length) {
      imgDomList.forEach(img => {
        img.addEventListener('load', () => {
        imgCount++
        if(imgCount === imgDomList.length) {
          // 所有图片加载完成
          setTimeout(() => {
            setRow()
          }, 100)
        }
      })
    } else {
      setRow()
    }
  })
})

// 设置瀑布流
function setRow() {
  const itemList = document.querySelectorAll('.grid-item')
  for (let index = 0; index < itemList.length; index++) {
    const item = itemList[index];
    const rows = Math.ceil(item.clientHeight / 5) + 2
    item.style.gridRowEnd = `span ${rows}`
  }
}

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

三、原理

核心是使用 grid-row-end: span 行数 来排布时，是浏览器自动排序，只需要告诉浏览器每个子级占了多少格，浏览器便会自动堆叠，并且是真正的哪里有坑就往哪堆，并不是左右左右的固定顺序，因此实现效果完全是真瀑布流的效果。

先将 grid 网格设置的特别密集，通过 grid-auto-rows: 5px; 来将每一行网格设置为 5px 高度，然后整个网格的效果如下：
之后我们首先要获取到子级的 dom，然后使用 clientHeight 来获取子级的真实高度。用这个真实高度除以5，就算出了子级需要占多少行了。这里加上2是为了两个子级之间的堆叠有 10px 的间距，不然都挤在一起了。最后我们为子级添加内联样式 grid-row-end: span 行数，这样子级就得到了适合它高度的网格数。

使用gird布局快速实现瀑布流

发表评论

共0条评论