小程序瀑布流

使用 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; 元素间隔