微信小程序瀑布流列表

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

<!-- <view class='waterfall'> --> 


  <!-- 左边 -->
  <!-- <view class='left'>
    <view wx:for="{{Arr1}}" wx:key="imgid" bindtap='tapAction'>

      <image src="{{item.pic}}" mode="widthFix"></image>
      <icon class='number'>{{index + 1}}</icon>
      <textview class='title'>{{item.name}}</textview>
      <textview class='subTitle'>{{item.remark}}</textview>
    </view>
  </view> -->

  <!-- 右边 -->
  <!-- <view class='right'>
    <view wx:for="{{Arr2}}" wx:key="imgid">
      <image src="{{item.pic}}" mode="widthFix"></image>
      <textview class='title'>{{item.name}}</textview>
      <textview class='subTitle'>{{item.remark}}</textview>
    </view>
  </view>

</view> -->

在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;
}