直播小程序源码，实现瀑布流布局的两种方式

直播小程序源码，实现瀑布流布局的两种方式

实现方式

方式一：在页面遍历数组时使用if判断当前下标是基数还是偶数,将一个数组拆分为两个数组左右显示

 

1

<br><view class="photos"><br>     <view class="list"><br>       <view class="list-item" v-for="(item,index) in list" :key="item" @click="detail(item)"><br>         <view class="item-content" v-if="index%2==0"><br>           <image class="avatar" :src="item.url" mode="widthFix"></image><br>           <view v-text="item.name+index"></view><br>         </view><br>       </view><br>     </view><br>     <view class="list"><br>       <view class="list-item" v-for="(item,index) in list" :key="item" @click="detail(item)"><br>         <view class="item-content" v-if="index%2==1"><br>           <image class="avatar" :src="item.url" mode="widthFix"></image><br>           <view v-text="item.name+index"></view><br>         </view><br>       </view><br>     </view><br></view><br> <view class="flow"><br>        <view class="left"><br>            <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}}"><br>                <image src="{{item1.image_watermark}}"  class="flowimg" mode="widthFix" lazy-load="true"></image><br>            </view><br>        </view><br>    </view>

​

方式二：在接口返回数据中定义图片高度,在页面遍历数组时选择自动换行且将高度进行设置渲染

主要css

 

1	column-count: 2; //2列<br>column-gap: 20rpx; //列间距<br>.fall-container {<br>  width: 100%;<br>  display: flex;<br>}<br>.fall-left {<br>  display: flex;<br>  flex-direction: column;<br>}<br>.fall-right {<br>  display: flex;<br>  flex-direction: column;<br>  margin-left: 20rpx;

 

以上就是 直播小程序源码，实现瀑布流布局的两种方式，更多内容欢迎关注之后的文章