ni-app项目瀑布流布局解决办法

解决方案

直接复制代码 <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]);    }  }};