小程序瀑布流

使用 css 实现小程序中的 瀑布流

wxml文件内容

  
    
      
        
        dffdfdfd
      



    
  

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