写页面时，考虑到美观，良好的用户体验，对于内容的展示我们经常会用到瀑布流式布局，那么如何实现一个简单的瀑布流呢？
原理：遍历数组判断奇偶性，然后分左右排布，左右两边代码基本一致
直接上代码：
index.wxml
//index.wxml<!-- 推荐&精选 --><view class="activity_recommend" wx:if="{{activeIndex == 0}}"><form bindsubmit="submitInfo" report-submit='true' wx:if="{{recommendListArr.length != 0}}"> <!-- form标签包裹以获取formId --><view class="recommend_content"><!-- 瀑布流左边 --><view class="left"><view wx:for="{{recommendListArr}}" wx:for-item="item" wx:key="item.activityid"><view name="m-recommend" class="recommend_item" wx:if="{{index%2==0}}"><button class="item-img_container" wx:if="{{item.isvideo == '0'}}" id="{{item.activityid}}"formType="submit" hover-class="none" bindtap="gotoLinks"><image class="item-img" src="{{imgUrl}}{{item.activityimg}}" mode="widthFix"></image></button><!-- 判断：当内容为视频时展示视频样式 --><image class="item-img_video" id="{{item.activityid}}" wx:if="{{item.isvideo == '1'}}"src="{{item.activityimg}}" mode="widthFix" bindtap="showVideo"></image><image class="playImg" wx:if="{{item.isvideo == '1'}}" src="../../images/recommend_play.png"bindtap="showVideo" mode="widthFix"></image><!-- 判断：当内容为图片时展示图片样式 --><view url="url" class="recommend_shopName">{{item.activityname}}</view><view class="recommend_shopper"><view class="shopper_container" id="{{item.storeid}}" bindtap="gotoStore"><image class="shopper_ava" src="{{item.headlogo}}"></image><text class="shopperName">{{item.nickname}}</text></view><view><button class="lovestatusBtn_on" form-type="submit" id="{{item.storeid}}"hidden="{{item.islike =='0'}}" bindtap="liketags"></button><button class="lovestatusBtn_no" form-type="submit" id="{{item.storeid}}"hidden="{{item.islike == '1'}}" bindtap="liketags"></button></view></view></view></view></view><!-- 瀑布流右边 --><view class="right"><view wx:for="{{recommendListArr}}" wx:for-item="item" wx:key="item.activityid"><view name="m-recommend" class="recommend_item" wx:if="{{index%2==1}}"><button class="item-img_container" wx:if="{{item.isvideo == '0'}}" id="{{item.activityid}}"formType="submit" hover-class="none" bindtap="gotoLinks"><image class="item-img" src="{{imgUrl}}{{item.activityimg}}" mode="widthFix"></image></button><image class="item-img_video" id="{{item.activityid}}" wx:if="{{item.isvideo == '1'}}"src="{{item.activityimg}}" mode="widthFix" bindtap="showVideo"></image><image class="playImg" wx:if="{{item.isvideo == '1'}}" src="../../images/recommend_play.png"bindtap="showVideo" mode="widthFix"></image><view url="url" class="recommend_shopName">{{item.activityname}}</view><view class="recommend_shopper"><view class="shopper_container" id="{{item.storeid}}" bindtap="gotoStore"><image class="shopper_ava" src="{{item.headlogo}}"></image><text class="shopperName">{{item.nickname}}</text></view><view><button class="lovestatusBtn_on" form-type="submit" id="{{item.storeid}}"hidden="{{item.islike =='0'}}" bindtap="liketags"></button><button class="lovestatusBtn_no" form-type="submit" id="{{item.storeid}}"hidden="{{item.islike == '1'}}" bindtap="liketags"></button></view></view></view></view></view></view></form></view>
index.wxss
//index.wxss/* 推荐&精选 */.activity_recommend{margin-top:10px;padding-top:5px;margin-left: 25rpx;margin-right:25rpx;position: relative;}.recommend_content{clear:both;overflow: hidden;width:100%;display: flex;justify-content: space-around;flex-wrap: wrap;}.recommend_content:after {content: "";width: 336rpx;}.recommend_item{display: inline-block;background:#fff;margin-bottom: 20rpx;border-radius: 12rpx;width:336rpx;min-height: 390rpx;max-height: 590rpx;position: relative;box-shadow: 0 4px 10px 0 rgba(0,0,0,0.10); //阴影效果}.item-img_container{width:336rpx ;border-radius: 12rpx 12rpx 0 0 ;}.item-img_container .item-img{width:336rpx;min-height: 190rpx;max-height: 380rpx;border-radius: 12rpx 12rpx 0 0 ;}.item-img_video{width:336rpx;min-height: 190rpx;max-height: 380rpx;border-radius: 12rpx 12rpx 0 0 ;}
index.js(可忽略）
//index.js// 获取formIdsubmitInfo(e) {this.setData({formId: e.detail.formId,},(res) => {})},//获取点击项的formId以此查询数据对其操作
也引用将上述代码，写入组件使用，可参考
ajing741472797/pbl
end
