新的设计图是按两列瀑布流排版的，类似于花瓣网那种。看到设计图后就在网上找，如何在小程序简单的实现，后来找到了一个特别简单的方法，就是利用wx:if和数组的下标对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({  /**   * 页面的初始数据   */  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;}

原著是一个有趣的人,若有侵权,请通知删除