小程序实现瀑布流布局的几种方式

基于微信小程序的瀑布流布局实现方式

前言：相对于固定单排的展示效果,瀑布流布局的样式显然更加能够让使用者眼前一亮。

一、功能介绍

在小程序内实现瀑布流展示效果。

二、单列效果图

三、瀑布流效果图

三、实现方式

方式一：在页面遍历数组时使用if判断当前下标是基数还是偶数,将一个数组拆分为两个数组左右显示
方式二：在接口返回数据中定义图片高度,在页面遍历数组时选择自动换行且将高度进行设置渲染

<view class="photos">
     <view class="list">
       <view class="list-item" v-for="(item,index) in list" :key="item" @click="detail(item)">
         <view class="item-content" v-if="index%2==0">
           <image class="avatar" :src="item.url" mode="widthFix"></image>
           <view v-text="item.name+index"></view>
         </view>
       </view>
     </view>
     <view class="list">
       <view class="list-item" v-for="(item,index) in list" :key="item" @click="detail(item)">
         <view class="item-content" v-if="index%2==1">
           <image class="avatar" :src="item.url" mode="widthFix"></image>
           <view v-text="item.name+index"></view>
         </view>
       </view>
     </view>
</view>

 <view class="flow">
        <view class="left">
            <view class="Item" style="height:{{item1.height}}" wx:for="{{List}}" wx:for-item="item1" wx:for-index="index1"   data-id="{{item1.id}}" data-index="{{item1.img_index}}">
                <image src="{{item1.image_watermark}}"  class="flowimg" mode="widthFix" lazy-load="true"></image>
            </view>
        </view>
    </view>

主要css
column-count: 2; //2列
column-gap: 20rpx; //列间距
.fall-container {
  width: 100%;
  display: flex;
}
.fall-left {
  display: flex;
  flex-direction: column;
}
.fall-right {
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
}