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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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
            })
         
      })
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
 <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* 瀑布流 */
.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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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
          }
        })
      })
   },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Page({
    data:{
        list:[],
        vList:[],
        v2List:[]
    },
  onLoad: function (options) {
      this.photoDetails();
  },
  photoDetails() {
      var data = {
      }
      post(接口名称, 'POST', data).then(res => {
          this.setData({
            list: res.data.photoDetails,//照片
          })
      })
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
 <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>