解决方案
直接复制代码 <hd-list/> 列表布局数据自己写
importhdList from"../component/hd-list.vue";exportdefault{ name:"waterfall", props: { listData: { type: Array,default: [] } }, components: { hdList }, watch: {/**
* 监听listData数据
*/listData: { handler: function(data) {data.length >0&&this.waterfallImage(); }, immediate:true} },data() {return{ goodsListCount:0,//加载第i张图片// 左侧商品列表goodsLeftList: [], goodsLeftListHeight:0,// 右侧商品列表goodsRightList: [], goodsRightListHeight:0}; }, methods: {// 图片绑定事件，通过比较左右列表高度，实现瀑布流展示onImageLoad: function(e) { let divWidth =342;//显示的单栏宽度，我设为342rpxlet oImgW = e.detail.width;//图片原始宽度let oImgH = e.detail.height;//图片原始高度let rImgH = (divWidth * oImgH) / oImgW +32;//根据宽高比计算当前载入的图片的高度if(this.goodsListCount ==0) {this.goodsLeftListHeight += rImgH;//第一张图片高度加到goodsLeftListHeightthis.goodsListCount++;//图片索引加1this.goodsRightList.push(this.listData[this.goodsListCount]);//添加第二张图片到goodsRightList数组，因为第一张已经初始化到左侧列表中}else{this.goodsListCount++;//图片索引加1if(this.goodsLeftListHeight >this.goodsRightListHeight) {//把图片的高度加到目前高度更低的栏中this.goodsRightListHeight += rImgH;//第二张图片高度加到goodsRightListHeight}else{this.goodsLeftListHeight += rImgH; }if(this.goodsListCount this.goodsRightListHeight) {this.goodsRightList.push(this.listData[this.goodsListCount]); }else{this.goodsLeftList.push(this.listData[this.goodsListCount]); } } } },// 向商品列表添加第一张图片async waterfallImage() {this.goodsListCount =0;this.goodsLeftList.push(this.listData[0]); } }};
