瀑布式佈局又叫流式佈局也叫百分比佈局

分為三個列表

總列表list

leftList和rightList

wxml內的程式碼為

<view class="box">
    <view class="left">
        <view bindtap="toDeatil" data-id="{{item.postsId}}" class=" fly" wx:for="{{leftList}}" wx:key="index">
        <view>
            <image mode='widthFix' src="{{item.coverImgUrl}}"></image>
            <view class="van-ellipsis" style="text-align: center;">
            {{item.title}}
 
<van-icon name="chat-o" />
            </view>
        </view>
    </view>
    </view>
    <view class="right">
        <view bindtap="toDeatil" data-id="{{item.postsId}}" class="fly" wx:for="{{rightList}}" wx:key="index">
        <image mode='widthFix' src="{{item.coverImgUrl}}"></image>
        <view class="van-ellipsis" style="text-align: center;">
        {{item.title}}
 
<van-icon name="chat-o" />
        </view>
    </view>
    </view>
</view>

在wx.js中寫入

Page({

data: {
        list:[],
        leftList:[],
        rightList:[],
        leftHeight: 0,
        rightHeight: 0,
    },
getlist(){//自定方法
        if(this.data.list.length == 0){
            
 
// console.log(this.data.leftList);
            return
        }
        let item = this.data.list.shift()
        // console.log(item);
        wx.getImageInfo({//獲取圖片的高度對比
          src: item.coverImgUrl,
          success:(res)=>{
              if(this.data.leftHeight > this.data.rightHeight){
                  this.data.rightList.push(item)
                  this.data.rightHeight += res.height/res.width
              }else{
                    this.data.leftList.push(item)
                    this.data.leftHeight += res.height/res.width
              }
          },
          
          complete:()=>{
            //   console.log(this.data.leftList);
            //   console.log(this.data.rightList);
              this.setData({
                  leftList:this.data.leftList,
                  rightList:this.data.rightList
              })
          }
        })
        // console.log(this.data.leftList);
        this.getlist()
        
    },
 onLoad: function (options) {
        getPost(this.pageNum,10).then(res=>{//getPost為封裝的請求介面
            console.log(res);
            this.setData({
                list:res.data.rows
            })
            this.data.list = res.data.rows
            // console.log(this.data.list);
            this.getlist()//在生命函式內呼叫getlist方法
        })
        
    },

})

就是給list列表分類如果left高度大於right高度則放在right列表內反之相同

在用wxss給兩個盒子樣式