前言

瀑布流在如今的桌面端和手机端非常常见，在2023年的今天，CSS3 Grid布局已经非常成熟，可以放心使用，因此我们来试试使用Grid来实现瀑布流。

原理

动态给每个单元格设置grid-row即可。

注意事项

1. 本方案的核心就是grid-row，本范例只考虑了图片是单元格里的唯一元素，如果你的单元格有更复杂的内容，你需要想办法计算正确的grid-row。

2. 图片作为单元格内唯一元素的话，后端接口应当传递图片的宽和高，这就要求图片上传的时候就储存下宽和高，否则的话，需要前端动态计算图片宽高，就很没有必要了。但是，本范例也演示了前端如何获取图片宽和高。

3. 想要运行范例代码，你需要在/assets/目录存放19张图片，命名从1.jpg到19.jpg。

全部代码

<template>
  <div v-if="show" id="waterfall-container">
    <div
      v-for="item in imgList"
      :key="item"
      class="waterfall-item"
      :style="{ gridRow: item.gridRow }"
    >
      <img :src="item.src" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [...Array(19 - 1 + 1).keys()].map((e) => {
        return {
          id: e + 1,
          src: require("@/assets/" + (e + 1) + ".jpg"),
          height: 0,
          gridRow: "",
        };
      }),
      show: false,
    };
  },
  created() {
    this.computeGridRow();
  },
  methods: {
    computeGridRow() {
      let count = this.imgList.length;
      this.imgList.forEach((img) => {
        let image = new Image();
        image.src = img.src;
        image.onload = () => {
          img.gridRow =
            "auto / span " + Math.round((image.height * 200) / image.width);
          count -= 1;
          if (!count) {
            this.show = true;
          }
        };
      });
    },
  },
};
</script>

<style lang="scss">
$root-font-size: 10px;
$grid-gap: 1.6rem;

// 假设1920px屏幕打算显示6列
$column-count-1920: 6;
// 这里采用1900px是因为要排掉滚动条宽度，通常是17px，这里多排除一些，所以1920px减掉20px
$minmax-1920: (
    (1900px / $root-font-size) * 1rem - ($grid-gap * ($column-count-1920 + 1))
  ) / $column-count-1920;

// 假设手机屏幕打算显示2列
$column-count-480: 2;
// 480的意思是目前世界上最大的手机分辨率宽度是低于480px，
// 所以@media screen and (max-device-width: 480px)使用480px。
// 这里采用360px是保证360px的老式手机依然能看到双列瀑布流
$minmax-480: (
    (360px / $root-font-size) * 1rem - ($grid-gap * ($column-count-480 + 1))
  ) / $column-count-480;

// 如果你要在平板上有合理的显示效果，你应该添加更多的变量和@media规则，但本范例不再举例

html {
  font-size: $root-font-size;
}

body {
  margin: 0;
}

#waterfall-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax($minmax-1920, 1fr));
  column-gap: $grid-gap;
  box-sizing: border-box;
  margin: 0 auto;
  padding: $grid-gap;
  max-width: (1920px / $root-font-size) * 1rem;

  .waterfall-item {
    box-sizing: border-box;
    padding-bottom: $grid-gap;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

@media screen and (max-device-width: 480px) {
  #waterfall-container {
    grid-template-columns: repeat(auto-fill, minmax($minmax-480, 1fr));
  }
}
</style>