小程序之瀑布流布局

新的设计图是按两列瀑布流排版的，类似于花瓣网那种。看到设计图后就在网上找，如何在小程序简单的实现，后来找到了一个特别简单的方法，就是利用wx:if和数组的下标对2取余来判断是排在左列还是排在右列，
话不多说看图上代码：

wxml:

<view class='footlist'>
  <view class="foot-left">
    <block wx:for="{{list}}" wx:key="{{ item.id }}">
      <view class='footbox' catchtap='jumpdetail' catchlongtap="deletefoot" bindtouchend="touchend" id="{{item.id}}" wx:if="{{index%2==0}}" data-cover="{{item.banner}}" data-title="{{item.title}}">
        <image class='cover' src="{{item.banner}}" mode="widthFix"></image>
        <view class="box-shadow">
          <text class='t1'>{{item.title}}</text>
          <view class='bot'>
            <view class='personbox' data-userid="{{item.userid}}" catchtap="toProfile">
              <image src="{{item.userinfo.avatarurl}}"></image>
              <text class="username">{{item.userinfo.nickName}} </text>
            </view>
            <view class='thump' data-fid='{{item.id}}' catchtap='thumptap'>
              <image class='un' data-fid='{{item.id}}' wx:if="{{item.islike=='1'}}" catchtap='unthumptap' src="../../images/thumph.png"></image>
              <view style="color:red;">❤ </view>
              <view class='thumpnum'>{{item.like}}</view>
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>

  <view class="foot-right">
    <block wx:for="{{list}}" wx:key="{{ item.id }}">
      <view class='footbox' catchtap='jumpdetail' catchlongtap="deletefoot" bindtouchend="touchend" id="{{item.id}}" wx:if="{{index%2==1}}" data-cover="{{item.banner}}" data-title="{{item.title}}">
        <image class='cover' src="{{item.banner}}" mode="widthFix"></image>
        <view class="box-shadow">
          <text class='t1'>{{item.title}}</text>
          <view class='bot'>
            <view class='personbox' data-userid="{{item.userid}}" catchtap="toProfile">
              <image src="{{item.userinfo.avatarurl}}"></image>
              <text class="username">{{item.userinfo.nickName}}</text>
            </view>
            <view class='thump' data-fid='{{item.id}}' catchtap='thumptap'>
              <image class='un' data-fid='{{item.id}}' wx:if="{{item.islike=='1'}}" catchtap='unthumptap' src="../../images/thumph.png"></image>
              <view style="color:red;">❤</view>
              <view class='thumpnum'>{{item.like}}</view>
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>
</view>

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
        id: 174,
        userid: 10,
        title: "日本岚山、和服一日游",
        banner: "https://hbimg.huabanimg.com/1ff95bdf3070e1fbff052a03ed353b409749f5ea16a809-WXy25b_fw658",
        points: 6,
        like: "62",
        userinfo: {
          id: 10,
          nickName: "李诗源",
          avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
        },
        islike: 0
      },
      {
        id: 173,
        userid: 9,
        title: "日本阿寒湖一日游",
        banner: "https://hbimg.huabanimg.com/ee5bf07b84fead3d57b445d2e7fa8eb6afe827c617e9c-ha1fZH_fw658",
        points: 7,
        like: "92",
        userinfo: {
          id: 9,
          nickName: "大飞狼",
          avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
        },
        islike: 0
      },
      {
        id: 172,
        userid: 8,
        title: "二次璧大乱斗东京动漫游",
        banner: "http://img1qn.moko.cc/2019-08-12/235e9bab-046e-4fea-afc2-4a049d81774e.jpg?imageView2/2/w/915/h/915/q/85",
        points: 4,
        like: "41",
        userinfo: {
          id: 8,
          nickName: "黄飞鸿",
          avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
        },
        islike: 0
      },
      {
        id: 100,
        userid: 314,
        title: "心和身体总要有一个在路上🏃",
        banner: "http://img.mb.moko.cc/2019-05-18/285bd040-2e62-4e1b-b0e8-91351c1f3c67.jpg?imageView2/2/w/915/h/915",
        points: 5,
        like: "110",
        userinfo: {
          id: 314,
          nickName: "二夏",
          avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
        },
        islike: 0
      },
      {
        id: 99,
        userid: 312,
        title: "新疆两日游",
        banner: "http://img.mb.moko.cc/2019-04-26/d4f1905c-3952-42be-9214-72260b97b0be.jpg?imageView2/2/w/915/h/915",
        points: 5,
        like: "99",
        userinfo: {
          id: 312,
          nickName: "Tohsaka",
          avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
        },
        islike: 0
      }
    ]
  },
})

wxss:

.footlist {
  position: relative;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  padding-top: 20rpx;
}

.footlist::after {
  content: '';
  clear: both;
  display: block;
}

.foot-left {
  float: left;
  width: 50%;
}

.foot-right {
  float: left;
  width: 50%;
}

.footbox {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  padding: 24rpx;
  padding-top: 10rpx;
}

.box-shadow {
  padding: 6rpx 10rpx 18rpx 10rpx;
  box-sizing: border-box;
  box-shadow: 0 2rpx 2rpx rgba(88, 88, 88, 0.233);
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
}

.footbox {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  padding: 24rpx;
  padding-top: 10rpx;
}

.footbox image {
  width: 100%;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
}

.footbox .thump {
  display: flex;
  justify-content: space-between;
  width: auto;
  height: 42rpx;
}

.footbox .thump image {
  width: 40rpx;
  height: 42rpx;
  float: right;
}

.footbox .bot {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 10rpx;
}

.footbox .bot::after {
  display: block;
  content: "";
  clear: both;
}

.footbox .bot .t1 {
  font-size: 30rpx;
  color: #1f1607;
  line-height: 1.5;
  /* margin-left: 38rpx; */
  overflow: hidden;
  width: 100%;
  margin-top: 15rpx;
}

.footbox .bot .t2 {
  font-size: 28rpx;
  color: #000;
  line-height: 100rpx;
  margin-left: 30rpx;
  float: left;
}

.foot-left .footbox {
  padding-right: 12rpx;
}

.personbox image {
  width: 42rpx;
  height: 42rpx;
  border-radius: 50%;
  background: #edaf39;
  float: left;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
}