feats

src/components/MasonryLayout/Item.jsx

@@ -0,0 +1,43 @@
+
+import React, { useMemo, useEffect } from 'react'
+import { View } from '@tarojs/components'
+import { classNames, getRect } from './utils';
+import './style.less'
+
+export default (props) => {
+  const { className, item, render, onRenderFinish } = props
+
+  const vid = item.__vid;
+  
+  useEffect(() => {
+    const calcHeight = () => {
+      getRect(`.${vid}`).then((res) => {
+        if (!res) {
+          // 找不到 node , 则一直重复查询
+          const t = setTimeout(() => {
+            clearTimeout(t)
+            calcHeight()
+          }, 300)
+        } else {
+          if (Array.isArray(res)) {
+            onRenderFinish(res[0])
+          } else {
+            onRenderFinish(res)
+          }
+        }
+      })
+    }
+
+    calcHeight()
+  })
+
+
+  return (
+    <View
+      key={vid}
+      className={classNames(className, 'masonry-item', vid)}
+    >
+      {render(item)}
+    </View>
+  )
+}

src/components/MasonryLayout/index.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
+import Item from './Item';
 import { useList } from './hooks';
 import { classNames, getRect } from './utils';
 
@@ -15,88 +16,58 @@ export default (props) => {
   const rightBottom = useRef(0)
   const [leftList, leftRef, setLeftList] = useList()
   const [rightList, rightRef, setRightList] = useList()
-  const vidRef = useRef()
-  const [cursor, setCursor] = useState(-1)
+  const [cursor, setCursor] = useState(0)
 
   const listRef = useRef([])
   listRef.current = list
-    
-  useEffect(() => {
-    if (list && list.length) {
-      setCursor(0)
+
+  const handleRenderFinish = (direct) => (rect) => {
+    const { bottom } = rect
+
+    if (direct === 'left') {
+      leftBottom.current = bottom
     } else {
-      setCursor(-1)
-      setLeftList([])
-      setRightList([])
+      rightBottom.current = bottom
     }
-  }, [list])
 
+    setCursor(cursor + 1)
+  }
+    
   useEffect(() => {
-    const len = !listRef.current ? 0 : listRef.current.length;
+    setCursor(0)
+    setLeftList([])
+    setRightList([])
+    listRef.current = list ? list.slice() : []
+  }, [list])
 
+  useEffect(() => {
+    const len = !list ? 0 : list.length;
     if (leftRef.current.length + rightRef.current.length >= len) return;
 
-    const item = listRef.current[cursor] || {}
+    const item = listRef.current.shift()
     item.__vid = `f-${Math.random().toString(36).substring(2)}`
-    vidRef.current = item.__vid
 
     if (leftBottom.current <= rightBottom.current) {
       setLeftList([...leftRef.current, item])
     } else {
       setRightList([...rightRef.current, item])
     }
-  }, [cursor])
-
-  useEffect(() => {
-    const setHeight = (rect) => {
-      const { bottom } = rect
-      if (cursor % 2 === 0) {
-        leftBottom.current = bottom
-      } else {
-        rightBottom.current = bottom
-      }
-      setCursor(cursor + 1)
-    }
-
-    const calcHeight = () => {
-      getRect(`.${vidRef.current}`).then((res) => {
-        if (!res) {
-          // 找不到 node , 则一直重复查询
-          const t = setTimeout(() => {
-            clearTimeout(t)
-            calcHeight()
-          }, 300)
-        } else {
-          if (Array.isArray(res)) {
-            setHeight(res[0])
-          } else {
-            setHeight(res)
-          }
-        }
-      })
-    }
-
-    calcHeight()
-  })
+  }, [cursor, list])
 
   return (
     <View
-      className={classNames(className, 'masonry-layout')}
       style={style}
+      className={classNames(className, 'masonry-layout')}
     >
       <View className='masonry-column'>
         {
-          leftList.map((item) => (
-            <View key={item.__vid} className={classNames(itemClassName, 'masonry-item', item.__vid)}>{render(item)}</View>
-          ))
+          leftList.map(item => <Item key={item.__vid} className={itemClassName} item={item} render={render} onRenderFinish={handleRenderFinish('left')} />)
         }
       </View>
       <View className='masonry-split' style={splitStyle} />
       <View className='masonry-column'>
         {
-          rightList.map((item) => (
-            <View key={item.__vid} className={classNames(itemClassName, 'masonry-item', item.__vid)}>{render(item)}</View>
-          ))
+          rightList.map(item => <Item key={item.__vid} className={itemClassName} item={item} render={render} onRenderFinish={handleRenderFinish('right')} />)
         }
       </View>
     </View>

src/hotel/pages/landlord/roomOrder/roomOrder.jsx

@@ -9,8 +9,6 @@ import { getRoomOrderList,getHotelDetail } from '@/services/landlord'
 import './roomOrder.less'
 
 
-
-
 export default withLayout((props) => {
   const { hotelId, roomId, roomName } = props.router.params
   const [detail, setDetail] = useState([])

src/pages/index/tabs/Recommend.jsx

@@ -6,7 +6,7 @@ import locationimg from '@/assets/icons/housemantj/location.png'
 import Tip from '@/components/tip'
 import List from '@/components/List';
 import NoData from '@/components/NoData'
-import SpinBox from '@/components/Spin/SpinBox';
+import MasonryLayout from '@/components/MasonryLayout';
 import { getIndexType, getResourceList } from '@/services/home'
 import Card from '../components/Card'
 import './less/Recommend.less'
@@ -109,7 +109,6 @@ export default (props) => {
           onDataChange={setAllList}
         >
           {/* <MasonryLayout
-            className='waterfall'
             list={alllist}
             render={item => <Card item={item} />}
           /> */}