微信小程序实现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='{{easyItem.goodsPicture}}' style="width:343rpx;height:auto;" mode='widthFix' class="im"></image>
    <view class="text">{{easyItem.text}}</view>
    <view class="author-con">
        <image src='{{easyItem.authorAvatar}}' style="width:32rpx;height:32rpx;border-radius:32rpx;"></image>
        <view style="font-size:20rpx;margin-left:10rpx;">{{easyItem.author}}</view>
    </view>
    <image src='../../resources/cover.png' style="width:128rpx;height:36rpx;" 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;
    /* 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;
}