uniapp 瀑布流实现代码示例 - 轻松打造图片流布局

<template>
  <view class='waterfall'>
    <view class='column' v-for='(col, index) in columns' :key='index'>
      <image v-for='(item, index) in col' :key='index' :src='item.src' class='item' mode='aspectFill'></image>
    </view>
  </view>
</template>
<style>
  .waterfall {
    display: flex;
    justify-content: space-between;
    padding: 10rpx;
  }
  .column {
    flex: 1;
    margin-right: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .item {
    width: 100%;
    margin-bottom: 10rpx;
  }
</style>
<script>
  export default {
    data() {
      return {
        columns: [], // 存储每列的图片数据
        images: [ // 图片数据
          { src: 'http://xxx.com/1.jpg' },
          { src: 'http://xxx.com/2.jpg' },
          { src: 'http://xxx.com/3.jpg' },
          { src: 'http://xxx.com/4.jpg' },
          { src: 'http://xxx.com/5.jpg' },
          { src: 'http://xxx.com/6.jpg' },
          { src: 'http://xxx.com/7.jpg' },
          { src: 'http://xxx.com/8.jpg' },
          { src: 'http://xxx.com/9.jpg' },
          { src: 'http://xxx.com/10.jpg' },
        ],
        columnCount: 3, // 列数
        columnHeights: [], // 存储每列的高度
      }
    },
    mounted() {
      this.initData() // 初始化数据
    },
    methods: {
      initData() {
        // 初始化每列的高度为0
        for (let i = 0; i < this.columnCount; i++) {
          this.columnHeights.push(0)
        }
        // 计算每张图片的宽度和高度
        uni.getImageInfo({
          src: this.images[0].src,
          success: (res) => {
            const { width, height } = res
            const itemWidth = (uni.getSystemInfoSync().windowWidth - (this.columnCount + 1) * 10) / this.columnCount
            const itemHeight = itemWidth * height / width
            // 分配每张图片到对应的列中
            this.images.forEach((item) => {
              const minHeight = Math.min(...this.columnHeights) // 获取当前高度最小的列的高度
              const minIndex = this.columnHeights.indexOf(minHeight) // 获取当前高度最小的列的索引
              item.width = itemWidth // 设置图片宽度
              item.height = itemHeight // 设置图片高度
              item.top = minHeight // 设置图片顶部距离
              item.left = (minIndex + 1) * 10 + minIndex * itemWidth // 设置图片左侧距离
              this.columnHeights[minIndex] += itemHeight + 10 // 更新当前列的高度
              if (this.columns[minIndex]) {
                this.columns[minIndex].push(item) // 将图片添加到当前列
              } else {
                this.columns[minIndex] = [item] // 如果当前列还没有图片，则新建一个数组并添加图片
              }
            })
            this.columns.forEach((col) => {
              col.forEach((item) => {
                this.$set(item, 'src', item.src) // 更新图片的src属性，使其能够显示
              })
            })
          }
        })
      }
    }
  }
</script>