uniapp 封装瀑布流组件

思路：

1.coulumns：需要分成几列

2.如何分布数据

3.计算每列的宽度

4.图片进行高度自适应

<template>
  <view :style="{ margin: boxM }">
    <view class="flex flex-justify-start bg-red" style="background-color: #e8e0e0; border-radius: 20rpx; padding: 20rpx">
      <view
        class="waterfall-list"
        v-for="(item, index) in columnCount"
        :key="index"
        :style="{ width: width, margin: `0 ${itemGap}`, borderRadius: '20rpx' }"
      >
        <view v-for="(el, i) in list[index]" :key="i" class="waterfall-item">
          <slot name="content" :item="el" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getSysInfo } from '@/utils/permission'
type Props = {
  sideGap: string
  itemGap: string
  columnCount: number
  data: Array<any>
}
const props = defineProps<Props>()
let width = ref('')
const { screenRate } = getApp().globalData
//默认两边给出外边距
const boxM = computed(() => {
  return props.sideGap || '20rpx'
})
//每列之间的间距
const itemGap = computed(() => {
  return props.itemGap ? parseInt(props.itemGap) / 2 + 'rpx' : '10rpx'
})
//所要分成几列
const columnCount = computed(() => {
  return props.columnCount || 2
})
//传入的数据
const data = computed(() => {
  return props.data || []
})
const list = ref<any>([])
onMounted(() => {
  //计算每列宽度&&通过将数据遍历均分给每一列 直到分完为止
  let screenWidth = getSysInfo().windowWidth
  width.value = ((screenWidth - 40 - (columnCount.value - 1) * parseInt(itemGap.value)) / columnCount.value) * (1 / screenRate) + 'rpx'
  for (let i = 0; i < columnCount.value; i++) {
    list.value[i] = []
  }
  let i = 0
  data.value.forEach((el, index) => {
    if (i > columnCount.value - 1) {
      i = 0
    }
    list.value[i].push(el)
    i++
  })
})
</script>

<style scoped lang="scss">
.waterfall-list {
  &:first-child {
    margin-left: 0 !important;
  }

  &:last-child {
    margin-right: 0 !important;
  }

  .waterfall-item {
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }
}
</style>

<!-- 使用 -->
<water-fall :columnCount="2" :data="arr">
      <template v-slot:content="{ item }">
        <view class="" style="">
          <image :src="item.url" style="width: 100%; border-radius: 20rpx" mode="widthFix"></image>
          <view class="" style="text-align: center">123</view>
        </view>
      </template>
    </water-fall>

...

<script setup lang="ts">
import waterFall from '@/components/Waterfall'
const arr = [
  { url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },
  { url: 'http://localhost:3000/uploadSubIcon/1716641663545-WechatIMG367.png' },
  { url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },
  { url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },
  { url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },
  { url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },
  { url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },
  { url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },
  { url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },
  { url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },
  { url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' },
  { url: 'http://localhost:3000/uploadSubIcon/1718875685835-WechatIMG3260.png' }
]
</script>