Gamelist 不规则布局

src/components/GameList/index.jsx

@@ -101,14 +101,22 @@ const GameList=({data,status,reqMore,user})=>{
     useEffect(()=>{
         initGridsInfo();
     },[gameListRef,width])
+    const getDesktopCol=()=>{
+        if (width>=1264&&width<=1564)return 6;
+        else if (width>=963&&width<=1263)return 5;
+        else if (width>=622&&width<=962)return 4;
+        else if (width<=621)return 3;
+        return 7;
+    }
     const initGridsInfo=()=>{
         let parent=gameListRef.current;
-        if (parent!=null){
+        // if (parent!=null){
             let totalCol=3;
-            if (!isMobile())totalCol=7;
+            if (!isMobile())totalCol=getDesktopCol();
             let gridBaseRatio=GameImgAspectRatio;
-            let totalWidth=parent.clientWidth;
-            let rowGap = window.getComputedStyle(parent).getPropertyValue('grid-row-gap');
+            let totalWidth=isMobile()?100*totalCol:160*totalCol;
+            if (parent!=null)totalWidth=parent.clientWidth;
+            let rowGap = parent!=null?window.getComputedStyle(parent).getPropertyValue('grid-row-gap'):"0px";
             let gap=Number(rowGap.replace("px",""));
             if (gap===0||isNaN(gap))gap=0.75*16*fontScale;
             let gridsData={};
@@ -121,7 +129,7 @@ const GameList=({data,status,reqMore,user})=>{
                 gridsData[i]={width,aspectRatio};
             }
             setGridInfo(gridsData);
-        }
+        // }
     }
     const resetTimer=()=>{
         if (objInfo.timer!=null){
@@ -186,8 +194,9 @@ const GameList=({data,status,reqMore,user})=>{
                     {
                         list.map((item, index) => {
                             let gridNum=item.gridNum!=null?item.gridNum:1;
-                            // gridNum=Math.floor(Math.random()*3)+1;
+                            gridNum=Math.floor(Math.random()*3)+1;
                             let whStyle=gridInfo[gridNum];
+                            if (whStyle==null)return (<></>);
                             return (
                                 <GameItem key={index} data={item} handleRoom={handlePopSelected} whStyle={whStyle}></GameItem>
                             )

src/components/GameSmallList/index.jsx

@@ -4,7 +4,7 @@ import {NavLink} from "react-router-dom";
 import symbol from "@assets/symbol-defs.svg";
 import {LazyLoadImage} from "react-lazy-load-image-component";
 import {useThemeProvider} from "@contexts/themeContext";
-import GameItem from "@components/GameItem";
+import GameItem, {GameImgAspectRatio} from "@components/GameItem";
 import SvgIcon from "@components/SvgIcon";
 import styled from 'styled-components/macro';
 import GameRoom from "@components/GameRoom";
@@ -101,6 +101,8 @@ const GameSmallList=({data,user})=>{
     // }
     let list=data.data;
     if (list==null)list=[];
+    const gameListRef = useRef(null);
+    const [gridInfo,setGridInfo]=useState({});
     const handleScroll=()=>{
         const gridList=gridListRef.current;
         if (gridList!=null){
@@ -185,6 +187,55 @@ const GameSmallList=({data,user})=>{
         setRoomRow({});
         setShowPopRoom(false);
     }
+    const getDesktopCol=()=>{
+        if (width>=1264&&width<=1564)return 6;
+        else if (width>=963&&width<=1263)return 5;
+        else if (width>=622&&width<=962)return 4;
+        else if (width<=621)return 3;
+        return 7;
+    }
+    const initGridsInfo=()=>{
+        let parent=isMobile()?gridListMRef.current:gridListRef.current;
+        // if (parent!=null){
+        let totalCol=3;
+        if (!isMobile())totalCol=getDesktopCol();
+        let gridBaseRatio=GameImgAspectRatio;
+        let totalWidth=isMobile()?100*totalCol:160*totalCol;
+        if (parent!=null)totalWidth=parent.clientWidth;
+        let rowGap =parent!=null?window.getComputedStyle(parent).getPropertyValue('grid-row-gap'):"0px";
+        let gap=Number(rowGap.replace("px",""));
+        if (gap===0||isNaN(gap))gap=0.75*16*fontScale;
+        let gridsData={};
+        for (let i=1;i<=6;i++){
+            let gridNum=i;
+            let gridWidth=(totalWidth-(totalCol-1)*gap)/totalCol;
+            let itemWidth=gridWidth*gridNum+(gridNum-1)*gap;
+            let width=itemWidth+"px";
+            let aspectRatio=gridBaseRatio*(itemWidth/gridWidth);
+            gridsData[i]={width,aspectRatio};
+        }
+        setGridInfo(gridsData);
+        // }
+    }
+    const formatMList = (list)=>{
+        let mList = [];
+        if (list!=null){
+            if (list.length<=3)mList.push(list);
+            else
+            {
+                for (let i = 0; i < list.length; i++) {
+                    let row=i%2;
+                    let rowList=mList[row];
+                    if (rowList==null){
+                        rowList=[];
+                        mList[row]=rowList;
+                    }
+                    rowList.push(list[i]);
+                }
+            }
+        }
+        return mList;
+    }
     useEffect(() => {
         const gridList=gridListRef.current;
         if (gridList) {
@@ -200,6 +251,9 @@ const GameSmallList=({data,user})=>{
             resetTimer();
         }
     }, []); // 空数组表示只在组件挂载和卸载时执行
+    useEffect(()=>{
+        initGridsInfo();
+    },[gridListRef,gridListMRef,width])
     const onChagePage=(change=1)=>{
         const gridList=gridListRef.current;
         if (gridList){
@@ -253,8 +307,12 @@ const GameSmallList=({data,user})=>{
                 <div className={styles.grid_list} ref={gridListRef}>
                     {
                         list.map((item, index) => {
+                            let gridNum=item.gridNum!=null?item.gridNum:1;
+                            gridNum=Math.floor(Math.random()*3)+1;
+                            let whStyle=gridInfo[gridNum];
+                            if (whStyle==null)return (<></>);
                             return (
-                                <GameItem key={index} data={item} handleRoom={handlePopSelected}></GameItem>
+                                <GameItem whStyle={whStyle} key={index} data={item} handleRoom={handlePopSelected}></GameItem>
                             )
                         })
                     }
@@ -287,29 +345,70 @@ const GameSmallList=({data,user})=>{
                 else gridStyle.rowGap=`${rowTop}rem`;
             }
         }
+        let rowlist=formatMList(list);
+        console.log(rowlist);
         return (
             <>
-                <div className={`${styles.grid_list_m} ${len<5?styles.grid_list_m_onerow:''}`} ref={gridListMRef} style={gridStyle}>
-                    {
-                        list.map((item, index) => {
-                            let itemStyle={}
-                            if (selected!==-1){
-                                let row=index%2;
-                                if (item.id!==selected){
-                                    itemStyle.filter="brightness(60%)";
-                                }
-                                else
-                                {
-                                    itemStyle.transform="scale(1.02)";
-                                }
-                            }
-                            return (
-                                <GameItem key={index} data={item} handleRoom={(e,data)=>{
-                                    handleSelect(e,data);
-                                }} style={itemStyle}></GameItem>
-                            )
-                        })
-                    }
+                <div className={`${styles.grid_list_m}`} ref={gridListMRef} style={gridStyle}>
+                    <div className={styles.grid_row_con}>
+                        {
+                            rowlist.map((ritem,rindex)=>{
+                                if (ritem==null)return (<></>);
+                                return (
+                                    <div key={rindex} className={styles.grid_row}>
+                                        {
+                                            ritem.map((item,index)=>{
+                                                let itemStyle={}
+                                                if (selected!==-1){
+                                                    let row=index%2;
+                                                    if (item.id!==selected){
+                                                        itemStyle.filter="brightness(60%)";
+                                                    }
+                                                    else
+                                                    {
+                                                        itemStyle.transform="scale(1.02)";
+                                                    }
+                                                }
+                                                let gridNum=item.gridNum!=null?item.gridNum:1;
+                                                gridNum=Math.floor(Math.random()*3)+1;
+                                                let whStyle=gridInfo[gridNum];
+                                                if (whStyle==null)return (<></>);
+                                                return (
+                                                    <GameItem whStyle={whStyle} key={index} data={item} handleRoom={(e,data)=>{
+                                                        handleSelect(e,data);
+                                                    }} style={itemStyle}></GameItem>
+                                                )
+                                            })
+                                        }
+                                    </div>
+                                )
+                            })
+                        }
+                    </div>
+                    {/*{*/}
+                    {/*    list.map((item, index) => {*/}
+                    {/*        let itemStyle={}*/}
+                    {/*        if (selected!==-1){*/}
+                    {/*            let row=index%2;*/}
+                    {/*            if (item.id!==selected){*/}
+                    {/*                itemStyle.filter="brightness(60%)";*/}
+                    {/*            }*/}
+                    {/*            else*/}
+                    {/*            {*/}
+                    {/*                itemStyle.transform="scale(1.02)";*/}
+                    {/*            }*/}
+                    {/*        }*/}
+                    {/*        let gridNum=item.gridNum!=null?item.gridNum:1;*/}
+                    {/*        gridNum=Math.floor(Math.random()*3)+1;*/}
+                    {/*        let whStyle=gridInfo[gridNum];*/}
+                    {/*        if (whStyle==null)return (<></>);*/}
+                    {/*        return (*/}
+                    {/*            <GameItem whStyle={whStyle} key={index} data={item} handleRoom={(e,data)=>{*/}
+                    {/*                handleSelect(e,data);*/}
+                    {/*            }} style={itemStyle}></GameItem>*/}
+                    {/*        )*/}
+                    {/*    })*/}
+                    {/*}*/}
                 </div>
                 <StyledRoomCon top={roomTop}>
                     {renderRoom()}

src/components/GameSmallList/styles.module.scss

@@ -71,7 +71,8 @@
     display: grid;
     grid-template-rows: repeat(var(--grid-rows), 1fr);
     grid-auto-flow: column;
-    grid-auto-columns: calc(100% / var(--grid-num) - (var(--grid-num) - 1)* var(--grid-gap) / var(--grid-num));
+    //grid-auto-columns: calc(100% / var(--grid-num) - (var(--grid-num) - 1)* var(--grid-gap) / var(--grid-num));
+    grid-template-columns: repeat(var(--grid-num),1fr);
     gap: var(--grid-gap);
     position: relative;
     scroll-snap-type: x mandatory;
@@ -81,24 +82,47 @@
     padding-top: .75rem;
   }
   & .grid_list_m{
-    --grid-gap: .75rem;
-    row-gap: 1.25rem;
-    display: grid;
-    grid-template-rows: repeat(2, 1fr);
-    grid-auto-flow: column;
-    //grid-auto-columns: calc(100% / var(--grid-num) - (var(--grid-num) - 1)* var(--grid-gap) / var(--grid-num));
-    grid-auto-columns: calc(100% / 3 - (2)* var(--grid-gap) / 3);
-    &_onerow{
-      grid-template-rows: repeat(1, 1fr);
-    }
-    gap: var(--grid-gap);
+    //--grid-gap: .75rem;
+    //row-gap: 1.25rem;
+    //display: grid;
+    //grid-template-rows: repeat(2, 1fr);
+    //grid-auto-flow: column;
+    ////grid-auto-columns: calc(100% / var(--grid-num) - (var(--grid-num) - 1)* var(--grid-gap) / var(--grid-num));
+    ////grid-auto-columns: calc(100% / 3 - (2)* var(--grid-gap) / 3);
+    //grid-template-columns:repeat(3, 1fr);
+    //&_onerow{
+    //  grid-template-rows: repeat(1, 1fr);
+    //}
+    //gap: var(--grid-gap);
+    //position: relative;
+    //scroll-snap-type: x mandatory;
+    //scroll-behavior: smooth;
+    //overflow-x: auto;
+    //overflow-y: hidden;
+    //transition: all var(--transition);
+    ////z-index: 2;
+    //padding-top: .75rem;
+    //display: flex;
+    //flex-direction: row;
+    width: 100%;
+    height:auto;
     position: relative;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     overflow-x: auto;
     overflow-y: hidden;
-    transition: all var(--transition);
-    //z-index: 2;
-    padding-top: .75rem;
+    gap: .75rem;
+    & .grid_row_con{
+      display: flex;
+      flex-direction: column;
+      gap: .75rem;
+      & .grid_row{
+        display: grid;
+        gap:.75rem;
+        grid-auto-flow: column;
+        grid-template-rows: repeat(1, 1fr);
+        grid-template-columns:repeat(3, 1fr);
+      }
+    }
   }
 }