uniapp瀑布流

<style lang="scss" scoped>
.list-container{
display: flex;
flex-wrap: wrap;
// padding-top: 40rpx;

}
.list{
flex: 1
}

.card{
margin: 4rpx;
border-radius: 10rpx;
overflow: hidden;

}
</style>

<template>
<view>
<view :id="'list_' + listId" class="list-container">
<view class="list" v-for="(items, i) in itemsList" :key="i">
<view class="card" v-for="(item, index) in items" :key="index" @click="handClickItem(item)">
<my-img :imgurl="item.image" :height="item.imgHeight"></my-img>
<my-content
:avater_url="item.avater_url"
:title="item.title"
:name="item.name"
></my-content>
</view>
</view>
</view>
<xLoadMore ref="loadMore"></xLoadMore>
</view>
</template>

<script>
import xLoadMore from '../../../pages_community/components/load_more/index.vue'
import xContent from "./content/index.vue"
import xImg from "./img/index.vue"

import { getImageInfo } from '../../../utils/uniapi.js'
import { randomStr } from '../../../utils/common.js'

export default {
components: {
xLoadMore,
'my-img': xImg,
'my-content': xContent
},

props: {
// 列数
column: {
type: Number,
default: 2,
},
list: {
type: Array,
default() {
return []
},
},
queryType: {
default: 0
}
},

data() {
return {
listId: randomStr(8),
itemsList: [[], []],
itemsHeight: [0, 0],
sum: 0, // 数据总个数
itemWidth: 0, // 每列宽度
}
},

watch: {
column() {
this.init()
},
list: {
deep: true,
handler() {
this.reset()
this.updateList(this.sum)
this.sum = this.list.length;
},
},
},

mounted() {
this.init()
},

methods: {
reset(){
if(this.queryType == 0) {
// 初始化数据
for (let i = 0; i < this.column; i++) {
this.itemsList[i] = []
this.itemsHeight[i] = 0
this.sum = 0;
}
}
},

init() {
this.reset()

// getNodeInfo('#list_' + this.listId, this).then(rect => {
// this.itemWidth = Math.floor((rect.width - (this.column + 1) * 10) / this.column)
// // console.log('this.itemWidth', this.itemWidth)
// this.updateList()
// })

// 单列宽度计算
this.itemWidth = Math.floor((uni.upx2px(750) - (this.column + 1) * 10) / this.column)
this.updateList()
},

// 更新列表
updateList(i = 0) {
const item = this.list[i]

if (!item) {
return;
}

if(i == 1) {
item.title += '---测试瀑布流--- 阿卡技术阿卡还是思考啥酒红色文化无花果'
}

getImageInfo(item.image).then(data => {
const min = Math.min.apply(Math.min, this.itemsHeight)
const index = this.itemsHeight.findIndex(n => n === min);

let height = 251;
if (data && data.height) {
height = this.itemWidth * data.height / data.width
}
item.imgHeight = height;

this.itemsList[index].push(item);
this.itemsHeight[index] += height
this.$forceUpdate()

setTimeout(() => {
this.updateList(i + 1)
})
})
},

openLoad() {
this.$refs.loadMore.openLoading()
},

closeLoad() {
this.$refs.loadMore.closeLoading()
},

noMore() {
this.$refs.loadMore.noMore()
},

// 点击元素
handClickItem(item) {
this.$emit('onClickItem', item)
}
},
}
</script>