微信小程序瀑布流列表

小程序的瀑布流列表，如果是两列，把屏幕分为2列，左边一列，右边一列。

在wxss里面，定义各个view的位置。

.waterfall .left {

  margin-left: 2%;
  width: 48%;
  display: inline-block;
  vertical-align: top;
  /* background-color: red; */
}
.waterfall .right {
 margin-right: 2%;
  width: 48%;
  display: inline-block;
  vertical-align: top;
  /* background-color: green; */
  white-space:pre-line;
}

.waterfall .title{
  margin-top: 0;
  margin-left: 10%;
  width: 80%;
  height: 100rpx;
  font-size: 24rpx;
  display: flex;
 flex-direction: column;
  justify-content: center;
  align-items: center;
    text-align: center;
  color:black;
  word-break: break-all;

 
}
.waterfall .subTitle{
   margin-top: 0;
  margin-left: 10%;
  width: 80%;
  box-sizing: border-box;

  height: 150rpx;
 font-size: 24rpx;
    display: flex;
  justify-content: center;
    text-align: center;
  color: #666666;
  word-break: break-all;

}

image{
  
  margin-left: 15%;
  width: 70%;
  height: 0;
  margin-top: 0;
  display: inline-block;
}