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

前言

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

基本效果

瀑布流概念

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

实现思路

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

代码实现

       1. 确定列数

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

useElement 会返回当前传入元素的宽度，返回值为 Ref，即如果该元素宽度改变，我们的 width 是实时改变的，column 通过计算属性也及时改变，如列数改变，页面将重新布局。

2. 确定位置（核心）

const setPosition = async (startIndex: number) => {for (let index = startIndex; index 

 对该方法返回的 imgList 进行循环后对生成图片并进行绝对定位，startIndex 是循环的起始位置，因为我这里涉及到懒加载，每次循环的起始位置不一定为 0。useImage 是 vueUse 的函数，传入图片路径后，会返回相关加载状态和 img。excute 是其返回的一个 promise，resolve 的是加载成功的 img 元素。loadImg 里会有该 img 的相关属性值。scaleHeight 为图片经过缩放比后在页面的显示高度。在循环中，if 里首先将第一行铺满，并将每列的初始高度传入 cHeight 数组（ref[]）, 当循环的元素不在第一列时。通过 cHeight 数组里最小高度，找到对应的下标及列数，该元素即可确定位置。top 为保存的高度数组里的最小高度加上图片顶部间隔（可根据实际设置），left 为对应下标与图片宽度的乘积加上对应图片间隔。最后设置 img 的 style，然后通过 dom 操作，将 img 挂载到容器下。

3. 响应式

 如对应容器的宽度发生变化造成列数变化则需重新对图片设置定位。

watch(width, (nowValue, preValue) => {
  // 初始渲染不调用，因为在首次获取图片时调用
  if (preValue == 0) {return;}
  // 如果宽度变化小于图片的宽度，则不重新布局
  if (Math.abs(nowValue - preValue) 

 4. 懒加载

 当图片数量很多时，我们不是一次返回所有图片，而是当我们滑倒页面底部时再重新请求下一批数据，从而更新渲染。vueUse 给我们提供了该函数 useInfiniteScroll()

useInfiniteScroll(
  imgWall,
  (state) => {if (!endFlag.value) {
      pageNum.value++;
      queryImgs();} else {ElMessage.info("无更多内容");
    }
  },
  {distance: 10}
);

传入对应的元素，和写入自己的业务函数即可

实现代码

总结

         基于 vue3 及 vueUse 实现的瀑布流布局实现了，但也有很多不足之处。一开始我是想通过 render 函数渲染，但是图片的请求是异步的，在 render 时一直报错（no parentNode）。后面使用原生 dom 的 append 操作。后面我将再试试 render 函数，以及将该抽离成 hook 函数以及实现图片的懒加载, 相关方法以及定义变量时未定义类型，后续我将完善。各处逻辑还有许多不足之处，请大家多多指教，谢谢。