基于微信小程序的瀑布流布局实现方式
前言:相对于固定单排的展示效果,瀑布流布局的样式显然更加能够让使用者眼前一亮。
一、功能介绍
在小程序内实现瀑布流展示效果。
二、单列效果图
三、瀑布流效果图
三、实现方式
方式一:在页面遍历数组时使用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;
}