使用 css 實現小程序中的 瀑布流
wxml文件內容
<view>
<view class='thePage'>
<view class='content' >
<view class='itemView' wx:for='{{images}}'>
<image src='./images/{{item}}.jpg' mode='widthFix'></image>
<text>dffdfdfd</text>
</view>
</view>
</view>
</view>
wxss文件內容
.thePage{
padding:20rpx;
}
.content{
column-count: 2;
column-gap: 20rpx;
background-color: white;
}
.itemView{
break-inside: avoid;
box-sizing: border-box;
padding: 20rpx;
border: 1px solid gray;
margin-bottom: 20rpx;
}
.itemView image{
width: 100%;
}
/* 小程序中文字居中樣式設置 */
text{
display: flex;
align-items: center;
justify-content: center;
background-color: red;
}
重點在于：
column-count: 2; 每一行多少個元素
column-gap: 20rpx; 元素間隔
