uniapp多行多列图片流式布局

UniApp是一个基于Vue.js的跨平台开发框架，可以用于开发iOS、Android、H5等多个平台的应用程序。在UniApp中实现多行多列图片流式布局可以通过使用flex布局和动态计算图片宽度来实现。

以下是一种实现多行多列图片流式布局的方法：

1. 使用flex布局：在父容器上设置display为flex，同时设置flex-wrap为wrap，这样子元素就可以自动换行了。

2. 动态计算图片宽度：为了实现多列布局，需要根据容器的宽度和每行的列数来计算每个图片的宽度。可以通过获取容器的宽度，然后除以列数得到每个图片的宽度。

3. 图片高度自适应：为了保持图片的比例，可以设置图片的高度为auto，这样图片的高度会根据宽度自适应。

下面是一个示例代码：

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

<script>
export default {
  data() {
    return {
      images: [
        { id: 1, url: 'image1.jpg' },
        { id: 2, url: 'image2.jpg' },
        { id: 3, url: 'image3.jpg' },
        // 更多图片...
      ],
      columnCount: 3, // 列数
      itemWidth: 0, // 每个图片的宽度
    };
  },
  mounted() {
    this.calculateItemWidth();
    window.addEventListener('resize', this.calculateItemWidth);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateItemWidth);
  },
  methods: {
    calculateItemWidth() {
      const containerWidth = this.$el.offsetWidth;
      this.itemWidth = Math.floor(containerWidth / this.columnCount);
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  margin-bottom: 10px;
}
</style>

这样就可以实现一个简单的多行多列图片流式布局。你可以根据实际需求调整列数和样式。