话不多说直接上干货:
 

现在component中创建一个waterfull的文件夹，并创建对应的wxml,wxss,jx,json文件

wxml：
 

    <view class="content"><view class="content-left"><block wx:for="{{list}}" wx:key="list" wx:if="{{index % 2 == 0}}"><view class="content-item" bindtap="detail" data-v="{{item}}"><image src="{{item.image}}" class="content-item-img" mode="widthFix" /><view class="content-item-box"><view class="content-item-title">{{item.title}}</view><view class="content-item-name"><view class="flex-row"><view style="color:#808080">{{item.info}}</view><view style="height:10rpx"></view></view></view></view></view></block></view><view class="content-right"><block wx:for="{{list}}" wx:key="list" wx:if="{{index % 2 == 1}}"><view class="content-item" bindtap="detail" data-v="{{item}}"><image src="{{item.image}}" class="content-item-img" mode="widthFix" /><view class="content-item-box"><view class="content-item-title">{{item.title}}</view><view class="content-item-name"><view class="flex-row"><view style="color:#808080">{{item.info}}</view><view style="height:10rpx"></view></view></view></view></view></block></view>
</view>

item.xxx这些东西根据自己的需求进行定义

wxss:

.content {display: flex;justify-content: space-around;
}
.content-left,
.content-right {width: 49%;
}
.content-item {margin: 10rpx auto 20rpx;background: #fff;width: 98%;border-radius: 20rpx;overflow: hidden;
}
.content-item-img {width: 100%;
}
.content-item-box {width: 95%;margin-left: 2.5%;font-size: 24rpx;color: #333;padding: 5rpx;box-sizing: border-box;
}
.content-item-title {/* 一行省略 */text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;font-size: 16px;font-weight: 500;
}.content-item-name {display: flex;align-items: center;justify-content: space-between;margin-top: 20rpx;font-size: 22rpx;
}

js:

//index.js
Component({properties: {list: {type: Array,defaultValue: []}},methods: {//wxml中绑定的事件在此处定义}});

使用瀑布流的页面，在其json文件中先引人

{"navigationBarTitleText": "","usingComponents": {"waterfull": "/component/Waterfull/Waterfull",}
}

wxml页面使用组件

<waterfull list="{{list}}"></waterfull>

{{list}}为要传过去的数组对象也就是需要生成瀑布流的数据