From 0efecbd9c195c7ae2595192d9382aa1516a2fb1e Mon Sep 17 00:00:00 2001
From: zerosoul <yanggc888@163.com>
Date: Wed, 8 Jun 2022 22:01:34 +0800
Subject: [PATCH] refactor: file list grid layout

---
 src/routes/resources/index.js  | 8 ++++++++
 src/routes/resources/styled.js | 4 +---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/routes/resources/index.js b/src/routes/resources/index.js
index ba63b8a2..d11b44a9 100644
--- a/src/routes/resources/index.js
+++ b/src/routes/resources/index.js
@@ -62,8 +62,16 @@ function ResourceManagement({ fileMessages }) {
   };
   useEffect(() => {
     if (view == Views.grid && listContainerRef) {
+      const container = listContainerRef.current;
+      const cWidth = container.getBoundingClientRect().width - 16 * 2;
+      const count = Math.floor(cWidth / 368);
+      const leftWidth = cWidth % 368;
+      const gutter = Math.max(Math.floor(leftWidth / (count - 1)), 8);
+      console.log("gutter", gutter, cWidth, count, leftWidth);
       msnry = new Masonry(listContainerRef.current, {
         // options
+        fitWidth: true,
+        gutter,
         itemSelector: ".file_box",
         // columnWidth: 200
       });
diff --git a/src/routes/resources/styled.js b/src/routes/resources/styled.js
index 783bbe8e..08b18b24 100644
--- a/src/routes/resources/styled.js
+++ b/src/routes/resources/styled.js
@@ -19,19 +19,17 @@ const Styled = styled.div`
     height: 100%;
     overflow-y: scroll;
     width: 100%;
-
     display: flex;
     &.item {
       gap: 8px;
       flex-direction: column;
-      /* align-items: flex-start; */
     }
     &.grid {
       flex-direction: row;
       flex-wrap: wrap;
       > .file_box {
         flex-direction: column;
-        margin-right: 8px;
+        /* margin-right: 8px; */
         margin-bottom: 8px;
       }
     }