瀑布流组件

src/pages/home/index.vue

 <template>
   <div class="domain">
-    abc
-    <Banner id="banner" :datas="componentsList[0]"></Banner>
+    ----瀑布流开始----
+    <waterfall-flow id="waterfallFlow"></waterfall-flow>
+    ----瀑布流结束----
+    <!-- <banner id="banner" :datas="componentsList[0]"></banner>
     <div class="domain">abc
 
-    <van-button type="primary">按钮</van-button>
-  </div>
+      <van-button type="primary">按钮</van-button> -->
+    <!-- </div> -->
   </div>
 </template>
 
@@ -698,7 +700,7 @@ export default {
 
 <style>
 .domain {
-  text-align: center;
-  padding-top: 50%;
+  /* text-align: center; */
+  /* padding-top: 50%; */
 }
 </style>
\ No newline at end of file

src/pages/home/main.json

 {
   "usingComponents": {
-    "Banner": "../../../static/nativeComponents/Banner/index",
+    "banner": "../../../static/nativeComponents/Banner/index",
+    "waterfall-flow": "../../../static/nativeComponents/module/WaterfallFlow/index",
     "van-button": "/static/vant/button/index"
   }
 }
\ No newline at end of file

static/nativeComponents/module/WaterfallFlow/index.json

+{
+  "components":true
+}
\ No newline at end of file

static/nativeComponents/module/WaterfallFlow/index.wxml

+<!--瀑布流组件-->
+<view class="waterfallFlow">
+	<view class="container flex">
+		<view
+		 wx:for="{{contentList}}"
+		 wx:key="index"
+		 class="container-item item{{index}}"
+		>
+			<view
+			 wx:for="{{item}}"
+			 wx:for-item="item1"
+			 wx:for-index="index1"
+			 wx:key="index1"
+			 class="imageItem"
+			>
+				<image
+				 src="{{item1.url}}"
+				 mode='widthFix'
+				 bindload="imageLoad"
+				 data-id="{{item1.heart_num}}"
+				/>
+				<!-- <image src="https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/241f95cad1c8a7863cb5bacd6709c93d71cf5052.jpg" mode='widthFix'></image> -->
+				<text>{{item1.name}}--{{item1.heart_num}}</text>
+			</view>
+		</view>
+	</view>
+</view>
+

static/nativeComponents/module/WaterfallFlow/index.wxss

+image {
+  width: 100%;
+}
+.flex {
+  display: flex;
+}
+.waterfallFlow{
+  width: 100vw;
+}
+.container {
+  justify-content: space-around;
+  align-items: flex-start;
+}
+.container-item{
+  width: 49%;
+}
+.imageItem{
+  border: 1px solid #333;
+  margin-bottom: 10rpx;
+}