在微信小程式中經常使用瀑布流來進行頁面的佈局，今天就遇到了這樣的情況，之前是一直用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;
}