⼩程序实现css瀑布流布局⽅法
在⼩程序中经常使⽤瀑布流来进⾏页⾯的布局，今天就遇到了这样的情况，之前是⼀直⽤flex布局来着，但是flex布局带来的问题是图⽚⾼度不同那么进⾏布局的时候有些图⽚的下⾯就会留出很多富余的空间这样看着就不是很好了，所以在这⾥采⽤瀑布流的⽅法：Multi-column，废话少说上代码：
index.wxml ⽚段（直接⽤到了瀑布流布局）
<view class='type-easy'>
<block wx:for='{{easyItemArray}}'>
<view class='typeDetail-con'>
<!--利⽤组件显⽰⽂章信息-->
<index-type-detail-component easyItem='{{item}}'></index-type-detail-component>
</view>
</block>
</view>
index.css代码：（主要看type-easy）
.type-easy{
padding: 0rpx 23rpx;
/* flex-wrap: wrap;
align-items: flex-start;
vertical-align: bottom; */
/*
两列显⽰
*/
column-count: 2;
column-gap: 18rpx;
}
.typeDetail-con:nth-child(2n+1){
margin-right: 18rpx;
}
.typeDetail-con:nth-child(2n){
margin-right: 0rpx;
}
组件index-type-detail-component
<!--components/index-type-detail-component/index-type-detail-component.wxml-->
<view class="con">
<image src='{{dsPicture}}' mode='widthFix' class="im"></image>
<view class="text">{{}}</view>
<view class="author-con">
<image src='{{easyItem.authorAvatar}}' ></image>
<view >{{easyItem.author}}</view>
</view>
<image src='../../resources/cover.png' class="im_t"></image>
<text class="watched-count">{{easyItem.watched}}</text>
</view>
组件css ：主要是.con的样式
/* components/index-type-detail-component/index-type-detail-component.wxss */ .con,.author-con{
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
}
.con{
position: relative;
float: left;
width:343rpx;
flex-direction: column;
border-radius: 10rpx;
/* margin-right: 18rpx; */
box-shadow: 0rpx 8rpx 8rpx #d0d0d0;
-webkit-box-shadow:0rpx 8rpx 8rpx #d0d0d0;
margin-bottom: 18rpx;
padding-bottom: 10rpx;
/*
避免在元素中断⾏产⽣新列
*/
-webkit-column-break-inside: avoid;
break-inside: avoid;
html的flex布局
/
* counter-increment:item-counter; */
}
.author-con{
width: 100%;
flex-direction: row;
margin-top:5rpx;margin-left:10rpx;
}
.im{
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
.
im_t{
border-top-right-radius: 10rpx;
position: absolute;
top: 0rpx;
right: 0rpx;
}
.watched-count{
position: absolute;
top: 0rpx;
right: 35rpx;
color:#fff;
font-size: 25rpx;
}
.text{
font-size:25rpx;margin-top:5rpx;margin-left:10rpx;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。