图片画廊瀑布流

static/nativeComponents/PhotoGallery/index.js

@@ -32,16 +32,46 @@ Component({
     }
     ],
     imgArr : [],
-    lenI : 0
+    lenI : 0,
+    WaterfallFlowListL : [],
+    WaterfallFlowListR : []
   },
   ready(){
-    console.log(this.data.datas.componentData.paddingList,'this.data.datas.componentData.paddingList')
+    
     if (this.data.datas.componentData.paddingList){
       this.setData({
         getPaddingList: this.data.datas.componentData.paddingList
       })
     }
 
+    if(this.data.datas.componentData.style == 'waterfall'){
+      console.log(this.data.datas.componentData,'图片画廊waterfall')
+      let list = this.data.datas.componentData.imgList
+      let WaterfallFlowListL = []
+      let WaterfallFlowListR = []
+
+      this.setData({
+        WaterfallFlowListL: [],
+        WaterfallFlowListR: []
+      })
+
+      list.forEach(((item,index) => {
+        if (index % 2 == 0) {
+          WaterfallFlowListL.push(item)
+        } else {
+          WaterfallFlowListR.push(item)
+        }
+      }))
+
+      this.setData({
+        ['WaterfallFlowListL']: WaterfallFlowListL,
+        ['WaterfallFlowListR']: WaterfallFlowListR
+      })
+
+      console.log(this.data.WaterfallFlowListL,this.data.WaterfallFlowListR,'图片画廊数据')
+
+    }
+
 
     this.data.datas.componentData.imgList.forEach((item,index) => {
       this.setData({

static/nativeComponents/PhotoGallery/index.wxml

@@ -21,4 +21,16 @@
       </view>
     </view>
   </view>
+  <view wx:elif="{{datas.componentData.style==='waterfall'}}" class="waterfall">
+    <view class="waterfall-l">
+      <view wx:for="{{WaterfallFlowListL}}" :wx:key="index" class="item">
+        <image src="{{item.imageUrl}}" mode="widthFix"></image>
+      </view>
+    </view>
+    <view class="waterfall-r">
+      <view wx:for="{{WaterfallFlowListR}}" :wx:key="index" class="item">
+        <image src="{{item.imageUrl}}" mode="widthFix"></image>
+      </view>
+    </view>
+  </view>
 </view>

static/nativeComponents/PhotoGallery/index.wxss

@@ -54,3 +54,27 @@
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg)
 }
+
+
+.waterfall{
+  overflow: hidden;
+  padding: 0 10px;
+}
+
+.waterfall-l{
+  width: 50%;
+  float: left;
+  box-sizing: border-box;
+  padding-right: 4px;
+}
+.waterfall-r{
+  width: 50%;
+  float: right;
+  box-sizing: border-box;
+  padding-left: 4px;
+}
+
+.waterfall .item{
+  background-color: #999;
+  margin-bottom: 8px;
+}
\ No newline at end of file