直播小程序源码，实现瀑布流布局的两种方式
实现方式
方式一：在页面遍历数组时使用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;
以上就是 直播小程序源码，实现瀑布流布局的两种方式，更多内容欢迎关注之后的文章
标签：flex,column,display,瀑布,直播,fall,源码 From： https://www.cnblogs.com/yunbaomengnan/p/16759647.html