小程序瀑布流的实现三种方式

实现思路：把图片分成两排，创建两个数组，计算总数组中图片的宽高，对比上一个图片和当前的图片高度，低的就给另一个数组添加。

效果图：

 第一种：如果后端返回了图片高度

处理过程如下：

js:

Page({
    data:{
        list:[],
        vList:[],
        v2List:[]
    },
  onLoad: function (options) {
      this.photoDetails();
  },
  photoDetails() {
      var data = {
      }
      post(接口名称, 'POST', data).then(res => {
          this.setData({
            list: res.data.photoDetails,//照片
          })
          var that = this;
          var list = res.data.photoDetails;
          list.forEach((item,idx) => {
            item.img_index = idx;  //添加索引字段，获取在原数组的位置
            item.checked = false;  //添加是否选中状态，默认都不选中
          })
         
          var vList = [];   //第一列
          var v2List = [];  //第二列
          var colOneHeight=0;
          var colTwoHeight=0;
            for (var i = 0; i < list.length; i++) {
               if(parseFloat(colOneHeight)<=parseFloat(colTwoHeight)){
                colOneHeight = parseFloat(list[i].img_height) + parseFloat(colOneHeight);
                 vList.push(list[i])
               }else{
                colTwoHeight = parseFloat(list[i].img_height) + parseFloat(colTwoHeight);
                 v2List.push(list[i])
               }
            }
            that.setData({
              list: list,
              vList: vList,
              v2List: v2List
            })
         
      })
  },
})

wxml:

 <view class="flow">
        <view class="left">
            <view class="leftItem" wx:for="{{vList}}" wx:for-item="item1" wx:for-index="index1"   data-id="{{item1.id}}" data-index="{{item1.img_index}}">
                <image src="{{item1.image_watermark}}"  class="flowimg" mode="widthFix" lazy-load="true"></image>
            </view>
        </view>
        <view class="right">
            <view class="rightItem" wx:for="{{v2List}}" wx:for-item="item2" wx:for-index="index2"   data-id="{{item2.id}}"  data-index="{{item2.img_index}}">
                <image src="{{item2.image_watermark}}"  class="flowimg" mode="widthFix" lazy-load="true"></image>
            </view>
        </view>
    </view>

wxss:

/* 瀑布流 */
.flow{
  display: flex;
  flex-direction: row;
  margin: 30rpx 30rpx 0 30rpx;
  box-sizing: border-box;
}
.flow .left{
  display: flex;
  flex-direction: column;
  width: 50%;
  margin-right: 8rpx;
}

.flow .left .flowimg, .flow .right .flowimg{
  /* width: 341rpx;
  height: auto; */
  width: 100%;
  height: 100%;
  margin-bottom: 8rpx;
}
.flow .right{
  display: flex;
  flex-direction: column;
  width: 50%;
}
.flow .leftItem, .flow .rightItem{
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

第二种：后端返回的数据没有图片高度，需要自己接收数据以后，计算图片的高度

js:

Page({
    data:{
        list:[],
        vList:[],
        v2List:[]
    },
  onLoad: function (options) {
      this.photoDetails();
  },
  photoDetails() {
      var data = {
      }
      post(接口名称, 'POST', data).then(res => {
          this.setData({
            list: res.data.photoDetails,//照片
          })
          var that = this;
          var list = res.data.photoDetails;
          list.forEach((item,idx) => {
               that.get_img_height(item.image_url).then(rr=>{
                 item.img_height = rr ;  //赋值高度
               })
            item.img_index = idx;  //添加索引字段，获取在原数组的位置
            item.checked = false;  //添加是否选中状态，默认都不选中
          })
         
          var vList = [];   //第一列
          var v2List = [];  //第二列
          var colOneHeight=0;
          var colTwoHeight=0;
          setTimeout(() => {   //使用延迟加载数据，这样有时候会计算输出NaN
            for (var i = 0; i < list.length; i++) {
               console.log('colOneHeight',colOneHeight);
               console.log('colTwoHeight',colTwoHeight)
               if(parseFloat(colOneHeight)<=parseFloat(colTwoHeight)){
                colOneHeight = parseFloat(list[i].img_height) + parseFloat(colOneHeight);
                 vList.push(list[i])
               }else{
                colTwoHeight = parseFloat(list[i].img_height) + parseFloat(colTwoHeight);
                 v2List.push(list[i])
               }
            }
            that.setData({
              list: list,
              vList: vList,
              v2List: v2List
            })
            console.log('vList',that.data.vList);
            console.log('v2List',that.data.v2List)
          }, 0);
      })
  },
  get_img_height(url){
      return new Promise(ress=>{
        wx.getImageInfo({
          src: url,
          success (res) {
            ress(res.height)
            return res.height
          }
        })
      })
   },
})

其他的同上

第三种：按照奇数偶数来显示

使用这种，如果图片长度差距太大，会造成左右不一

js:

Page({
    data:{
        list:[],
        vList:[],
        v2List:[]
    },
  onLoad: function (options) {
      this.photoDetails();
  },
  photoDetails() {
      var data = {
      }
      post(接口名称, 'POST', data).then(res => {
          this.setData({
            list: res.data.photoDetails,//照片
          })
      })
  },
})

wxml:

 <view class="flow">
        <view class="left">
            <view class="leftItem" wx:for="{{list}}" wx:for-item="item1" wx:for-index="index1"   data-id="{{item1.id}}" data-index="{{item1.img_index}}" wx:if="{{index1%2==0}}">
                <image src="{{item1.image_watermark}}"  class="flowimg" mode="widthFix" lazy-load="true"></image>
            </view>
        </view>
        <view class="right">
            <view class="rightItem" wx:for="{{list}}" wx:for-item="item2" wx:for-index="index2"   data-id="{{item2.id}}"  data-index="{{item2.img_index}}" wx:if="{{index2%2==1}}">
                <image src="{{item2.image_watermark}}"  class="flowimg" mode="widthFix" lazy-load="true"></image>
            </view>
        </view>
    </view>

最后

以上就是谨慎小甜瓜为你收集整理的小程序瀑布流的实现三种方式的全部内容，希望文章能够帮你解决小程序瀑布流的实现三种方式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。