Vue3 结合vueUse实现图片瀑布流布局以及响应式，懒加载

前言

        最近在用vue3及相关生态做一个自己的小网站项目学习时，做到个人中心模块时觉得内容很单一空洞，在短视频上看到瀑布流实现，以前只听说过瀑布流这种概念布局，没有深究其实现原理。想着可以搞个照片墙菜单用vue3实操一波。有很多不足之处，希望大家多多指正。

基本效果

瀑布流概念

        瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据并附加至当前尾部。最后页面布局趋向于平铺，所以在视觉上看起来很舒服。

实现思路

        了解瀑布流概念后，图片的宽带应该是固定的，这样我们就能得到页面布局的列数，最后就是要将页面不同元素排的合理使其页面达到尽可能平铺，这就要我们将图片放到合理位置，想到可通过绝对定位来实现。将第一行铺满后，需对后面的图片进行定位操作，需将该图片放到第一行图片各列占用高度最低的元素下，依次类推，最后页面将实现平铺效果。

代码实现

       1.确定列数

        因为页面宽度固定，图片宽度应固定，不考虑各列之间的间隔则列数为页面宽度/图片宽度向下取整，保证图片在横向平铺不产生进度条。在vue3的生态vueUse中，可通过useElementSize()函数获得。

<template>
  <div class="img-wall" ref="imgWall">
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, h, render, onMounted, computed } from "vue";
// 图片显示宽度
const imgWidth = 300;
// 容器元素
const imgWall = ref<HTMLElement>(null);
// 容器盒子宽度
const { width } = useElementSize(imgWall);
//列数
const column = computed(() => Math.floor(width.value / imgWidth));
<script>

useE