新的設(shè)計(jì)圖是按兩列瀑布流排版的彼妻，類似于花瓣網(wǎng)那種肉津。看到設(shè)計(jì)圖后就在網(wǎng)上找洛二，如何在小程序簡單的實(shí)現(xiàn)馋劈，后來找到了一個(gè)特別簡單的方法，就是利用wx:if和數(shù)組的下標(biāo)對2取余來判斷是排在左列還是排在右列晾嘶，
話不多說看圖上代碼：

b878d9ea6545b27469595a8d88951bb.png

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({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  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: "心和身體總要有一個(gè)在路上??",
        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;
}