实现vue3 图片瀑布流 宽度自适应

在Vue3中实现图片瀑布流布局通常会用到CSS Grid或Flexbox，以及JavaScript来动态计算和渲染图片容器。以下是一个简单的步骤：

1. **HTML结构**:
使用`<div>`作为容器，并包含多个`<img>`标签代表每张图片。

<div class="waterfall-container">
  <img v-for="item in images" :key="item.id" :src="item.src" :style="{width: 'auto', height: 'auto'}" />
</div>

2. **CSS样式**:
- 使用`.waterfall-container`来设置网格布局（如Grid）或弹性布局（如Flex）。对于宽度自适应，你可以让每个单元格的宽度占可用空间的一部分。
- 对于瀑布流效果，可以设置一个固定的列数，比如每行显示3张图片，然后调整图片高度使其填满行。

.waterfall-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

img {
  object-fit: cover; /* 保持图片缩放适中 */
}

3. **Vue绑定样式**:
如果你有特定的图片尺寸数据，可以将图片的高度设置成百分比或者通过计算得出的值，而不是硬编码。

4. **JavaScript优化**:
针对懒加载或性能优化，你可以考虑使用第三方库如vue-lazyload或在需要的时候动态加载图片。