feat: 修复作者列表页高度变更不准确的问题

nonhana · Sep 26, 2024 · 042bcba · 042bcba
1 parent e8d5b4a
commit 042bcba
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 36 deletions.
diff --git a/src/components/common/waterfall-item/index.tsx b/src/components/common/waterfall-item/index.tsx
@@ -7,15 +7,17 @@ import LazyImg from '../lazy-img'
 
 type WaterfallItemProps = {
   item: WorkNormalItem
+  height: number
   [key: string]: any
 }
 
-const WaterfallItem: FC<WaterfallItemProps> = ({ item, ...props }) => {
+const WaterfallItem: FC<WaterfallItemProps> = ({ item, height, ...props }) => {
   const [hovering, setHovering] = useState(false)
 
   return (
     <div
       {...props}
+      style={{ height }}
       className='relative w-75 rd-6 overflow-hidden cursor-pointer'
       onMouseEnter={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}>
@@ -25,7 +27,7 @@ const WaterfallItem: FC<WaterfallItemProps> = ({ item, ...props }) => {
           className='absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center gap-10px items-center bg-black bg-opacity-32 color-white font-size-m z-1'>
           <span>作品名称：{item.name}</span>
           <span>转载人：{item.authorName}</span>
-          <span>创建时间：{item.createdAt}</span>
+          <span>转载时间：{item.createdAt}</span>
         </Link>
       </CSSTransition>
       <LazyImg src={item.cover} alt={item.name} />

diff --git a/src/components/illustrator/waterfall-flow.tsx b/src/components/illustrator/waterfall-flow.tsx
@@ -13,7 +13,8 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import WaterfallItem from '../common/waterfall-item'
 
-const listClass = 'absolute w-80 flex flex-col gap-5'
+const pageSize = 10
+const listClass = 'absolute w-75 flex flex-col gap-5'
 
 type WaterfallItemInfo = WorkNormalItem & { index: number; height: number }
 
@@ -29,9 +30,9 @@ const WaterfallFlow: FC<WaterfallFlowProps> = ({ startAppreciate }) => {
   const { illustratorId } = useParams<{ illustratorId: string }>()
 
   const [workList, setWorkList] = useState<WaterfallItemInfo[]>([])
-  const [_, setHeightArr] = useState<number[]>([0, 0, 0])
+  const [heightArr, setHeightArr] = useState<number[]>([0, 0, 0])
   const [current, setCurrent] = useState(1)
-  const pageSize = 10
+  const [isFinal, setIsFinal] = useState(false)
   const atBottom = useAtBottom()
   const containerRef = useRef<HTMLDivElement>(null)
 
@@ -42,6 +43,7 @@ const WaterfallFlow: FC<WaterfallFlowProps> = ({ startAppreciate }) => {
         current,
         pageSize,
       })
+      if (data.length < pageSize) setIsFinal(true)
       // 遍历作品数组，将每个作品插入到目前最短的列中
       data.forEach((item) => {
         const coverImage = new Image()
@@ -50,20 +52,16 @@ const WaterfallFlow: FC<WaterfallFlowProps> = ({ startAppreciate }) => {
           setHeightArr((prev) => {
             const minIndex = prev.indexOf(Math.min(...prev))
             const newArr = [...prev]
-            const resultHeight = Math.ceil((coverImage.height * 300) / coverImage.width)
+            const resultHeight = (coverImage.height * 300) / coverImage.width
             newArr[minIndex] += resultHeight + 20
             setWorkList((prev) => [
               ...prev,
               {
                 ...item,
                 index: minIndex,
-                height: coverImage.height,
+                height: resultHeight,
               },
             ])
-            // 更新外层 div 高度
-            if (containerRef.current) {
-              containerRef.current.style.height = `${Math.max(...newArr)}px`
-            }
             return newArr
           })
         }
@@ -74,12 +72,18 @@ const WaterfallFlow: FC<WaterfallFlowProps> = ({ startAppreciate }) => {
     }
   }
 
+  useEffect(() => {
+    if (!containerRef.current || heightArr.every((item) => !item)) return
+    const maxHeight = Math.max(...heightArr)
+    containerRef.current.style.height = maxHeight + 'px'
+  }, [heightArr])
+
   useEffect(() => {
     getIllustratorWorksInPages()
   }, [illustratorId, current])
 
   useEffect(() => {
-    if (!atBottom) return
+    if (!atBottom || isFinal) return
     setCurrent((prev) => prev + 1)
   }, [atBottom])
 
@@ -98,26 +102,41 @@ const WaterfallFlow: FC<WaterfallFlowProps> = ({ startAppreciate }) => {
   }, [startAppreciate])
 
   return (
-    <div ref={containerRef} className='relative w-250'>
-      <div className={`${listClass}`}>
+    <div ref={containerRef} className='relative w-245'>
+      <div className={listClass}>
         {workList
           .filter((item) => item.index === 0)
           .map((item) => (
-            <WaterfallItem key={item.id} item={item} onClick={addIllustratorWorks} />
+            <WaterfallItem
+              key={item.id}
+              item={item}
+              height={item.height}
+              onClick={addIllustratorWorks}
+            />
           ))}
       </div>
       <div className={`${listClass} left-340px`}>
         {workList
           .filter((item) => item.index === 1)
           .map((item) => (
-            <WaterfallItem key={item.id} item={item} onClick={addIllustratorWorks} />
+            <WaterfallItem
+              key={item.id}
+              item={item}
+              height={item.height}
+              onClick={addIllustratorWorks}
+            />
           ))}
       </div>
       <div className={`${listClass} left-680px`}>
         {workList
           .filter((item) => item.index === 2)
           .map((item) => (
-            <WaterfallItem key={item.id} item={item} onClick={addIllustratorWorks} />
+            <WaterfallItem
+              key={item.id}
+              item={item}
+              height={item.height}
+              onClick={addIllustratorWorks}
+            />
           ))}
       </div>
     </div>

diff --git a/src/hooks/useAtBottom.ts b/src/hooks/useAtBottom.ts
@@ -25,21 +25,4 @@ const useAtBottom = (): boolean => {
   return isBottom
 }
 
-const useAtBottomNoRerender = (eventCallback: (isBottom: boolean) => void) => {
-  useEffect(() => {
-    const handleScroll = debounce(() => {
-      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
-      const clientHeight = document.documentElement.clientHeight || window.innerHeight
-
-      const isBottom = scrollTop + clientHeight >= scrollHeight - 100
-      eventCallback(isBottom)
-    }, 50)
-
-    document.addEventListener('scroll', handleScroll)
-
-    return () => document.removeEventListener('scroll', handleScroll)
-  }, [eventCallback])
-}
-
-export { useAtBottom, useAtBottomNoRerender }
+export { useAtBottom }
diff --git a/src/pages/illustrator/index.tsx b/src/pages/illustrator/index.tsx
@@ -45,7 +45,7 @@ const Illustrator: FC = () => {
               返回
             </Button>
             <div className='absolute top--20 left-1/2 transform -translate-x-1/2 flex flex-col gap-2.5 items-center color-shallowblack font-size-18px font-bold'>
-              <div className='w-40 h-40 rd-full color-white b-5px b-solid overflow-hidden'>
+              <div className='w-40 h-40 rd-full color-white b-5px b-solid overflow-hidden cursor-pointer'>
                 <HanaViewer>
                   <PhotoView
                     src={