微信小程序：瀑布流使用float的问题

今天学习瀑布流我一开始float来做，当添加mode=“widthFix”出现了问题

和理想中的效果差距还是很大

.content{
 
  width:48%;
  float: left;
  display: flex;
  justify-content: center;
  text-align: justify;
  margin-top: 5rpx;
}
.concretecontent{
  display: inline-block;
  vertical-align: top;
  width: 80%;
}
.concretecontent image{
  width: 100%;

  border-radius: 25rpx;
}

<view class="a" >
  <view class="content" wx:for="{{content}}" wx:key="index" >
    
    <block  >
      <template is="item" data="{{...item}}" wx:if="{{index%2==0}}"></template>
    </block>
    <block >
      <template is="item" data="{{...item}}" wx:if="{{index%2!=0}}"></template>
    </block>
  </view>
</view>
<template name="item" >
  <view class="concretecontent">
    <image mode="widthFix" src="{{url}}"></image>
    <view class="text">
      160
    </view>
  </view>
</template>

接下来换CSS3中的方法

知识点：

column-gap	属性指定了列与列间的间隙
column-count	属性指定了需要分割的列数
break-inside	属性用于设置是否在指定元素中插入分页符
mode=“widthFix”	保证高度不变宽度自定义

效果还是不错的
这是css代码

.content{
  width: 99%;  /*占每列的宽的900%*/
  break-inside: avoid;
}
.concretecontent{
  width: 90%;
  margin-top: 20rpx;
  margin-left: 5%;
  background-color: rgb(245, 243, 243);
  border-radius: 25rpx;
}
.concretecontent image{
  width: 100%;
  border-radius: 25rpx;
}
.a{
  column-gap: 5rpx;
  column-count: 2;
  padding: 10rpx 10rpx 10rpx 15rpx;
}
.text{
  height: 70rpx;
}