思路:
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>