始宁农业小程序：瀑布流优化

htmldev/shiningWxMini/pages/goods/goods.js

@@ -1,8 +1,5 @@
 const pages = require('../../mixin/pages')
 const { getProductCategoryList } = require('../../api/common')
-let leftHeight = 0
-let rightHeight = 0
-let query = null
 
 Page({
 
@@ -127,32 +124,18 @@ Page({
       leftList,
       rightList
     } = this.data
-    query = wx.createSelectorQuery().in(this)
-    for (const item of list) {
-      if (leftHeight < rightHeight) {
+
+    list.forEach((item, index) => {
+      if (index % 2 === 0) {
         leftList.push(item)
-      } else if (leftHeight === rightHeight) {
-        leftList.length <= rightList ? leftList.push(item) : rightList.push(item)
       } else {
         rightList.push(item)
       }
-      await this.getBoxHeight(leftList, rightList)
-    }
-  },
-  getBoxHeight(leftList, rightList) {
-    return new Promise((resolve, reject) => {
-      this.setData({
-        leftList,
-        rightList
-      }, () => {
-        query.select('.waterfall-left').boundingClientRect()
-        query.select('.waterfall-right').boundingClientRect()
-        query.exec((res) => {
-          leftHeight = res[0].height
-          rightHeight = res[1].height
-          resolve()
-        })
-      })
+    })
+
+    this.setData({
+      leftList,
+      rightList
     })
   }
 })

htmldev/shiningWxMini/pages/goods/goods.scss

@@ -25,6 +25,7 @@
 .waterfall-right {
   display: inline-block;
   width: 330rpx;
+  vertical-align: top;
 }
 
 .waterfall-right {

htmldev/shiningWxMini/pages/home/home.js

@@ -3,9 +3,6 @@ const { getProductCategoryList } = require('../../api/common')
 const { getLunboList } = require('./api/index')
 const app = getApp()
 const tmplIds = 'uc9ztDw9ZscpNkMr52XUcB7YrDBk5AzjrRtNSu8Dq-4'
-let leftHeight = 0
-let rightHeight = 0
-let query = null
 
 Page({
 
@@ -59,9 +56,7 @@ Page({
     }
     this.fetchLunboList()
     await this.fetchProductCategoryList()
-    if (this.data.searchForm.category_id) {
-      this.fetchOrderList()
-    }
+    this.fetchOrderList()
   },
 
   /**
@@ -182,32 +177,18 @@ Page({
       leftList,
       rightList
     } = this.data
-    query = wx.createSelectorQuery().in(this)
-    for (const item of list) {
-      if (leftHeight < rightHeight) {
+
+    list.forEach((item, index) => {
+      if (index % 2 === 0) {
         leftList.push(item)
-      } else if (leftHeight === rightHeight) {
-        leftList.length <= rightList ? leftList.push(item) : rightList.push(item)
       } else {
         rightList.push(item)
       }
-      await this.getBoxHeight(leftList, rightList)
-    }
-  },
-  getBoxHeight(leftList, rightList) {
-    return new Promise((resolve, reject) => {
-      this.setData({
-        leftList,
-        rightList
-      }, () => {
-        query.select('.waterfall-left').boundingClientRect()
-        query.select('.waterfall-right').boundingClientRect()
-        query.exec((res) => {
-          leftHeight = res[0].height
-          rightHeight = res[1].height
-          resolve()
-        })
-      })
+    })
+
+    this.setData({
+      leftList,
+      rightList
     })
   },
   jumpLeavingAMessage() {

htmldev/shiningWxMini/pages/home/home.wxss

@@ -221,6 +221,7 @@
 .waterfall-right {
   display: inline-block;
   width: 330rpx;
+  vertical-align: top;
 }
 
 .waterfall-right {