feat: 瀑布流

Author: SHUAXINDIARY

README.md

@@ -0,0 +1,7 @@
+# 简介
+
+对上传的多张图片做组合拼接的
+
+# 技术栈
+
+Vite + React 

eslint.config.js

@@ -20,6 +20,7 @@ export default tseslint.config(
     rules: {
       ...reactHooks.configs.recommended.rules,
       "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
       "react-refresh/only-export-components": [
         "warn",
         { allowConstantExport: true },

src/App.tsx

@@ -5,40 +5,86 @@ import a from "./assets/testImage/006bAzwAgy1hpi6dijal4j35ie2q2b2c.jpg";
 import b from "./assets/testImage/0074J156ly1hplq1w0odrj31vw3pce82.jpg";
 import c from "./assets/testImage/008rZrLhgy1hr0jn3g09aj31mz17r7wh.jpg";
 import d from "./assets/testImage/20240613-121606.jpeg";
+import Drawer from "./components/Drawer.js";
 
-const IMG_LIST = [a, b, c, d, a, b, c, d, a, b, c, d] as string[];
+const IMG_LIST = [
+  a,
+  b,
+  c,
+  d,
+  a,
+  b,
+  c,
+  d,
+  a,
+  b,
+  c,
+  d,
+  a,
+  b,
+  d,
+  c,
+  d,
+  c,
+  d,
+  a,
+  b,
+  c,
+  a,
+  b,
+
+  b,
+  b,
+  c,
+  a,
+  b,
+  b,
+
+  b,
+  b,
+  c,
+  a,
+  b,
+  b,
+  c,
+  a,
+  d,
+] as string[];
 
 function App() {
   const imgContainer = useRef(null);
+  let timer: null;
   useEffect(() => {
     if (imgContainer.current) {
       setTimeout(() => {
         // @ts-ignore
         new Packery(imgContainer.current, {
           itemSelector: ".imgItem",
-          gutter: 0,
           percentPosition: true,
+          horizontal: true,
         });
+       
       }, 100);
     }
+    return () => {
+      timer && clearTimeout(timer);
+    };
   }, [imgContainer.current]);
   return (
-    <div className="w-screen h-screen bg-red-50 flex justify-center items-center overflow-hidden">
-      <div className="card bg-white w-10/12 h-5/6 shadow-xl">
-        <div
-          className="card-body relative w-full h-auto overflow-hidden imageContainer"
-          ref={imgContainer}
-        >
-          {IMG_LIST.map((item) => {
-            return (
-              <img
-                src={item}
-                key={item + Math.random() * 1000}
-                className="absolute h-1/4 object-cover imgItem"
-              />
-            );
-          })}
-        </div>
+    <div className="w-screen h-screen flex justify-center items-center overflow-hidden">
+      <div className="absolute top-2 left-2 z-50">
+        <Drawer />
+      </div>
+      <div ref={imgContainer} className="w-full h-full">
+        {IMG_LIST.map((item) => {
+          return (
+            <img
+              src={item}
+              key={item + Math.random() * 1000}
+              className={`absolute object-cover h-1/5 w-auto imgItem`}
+            />
+          );
+        })}
       </div>
     </div>
   );

src/components/Drawer.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from "react";
+
+const Drawer = () => {
+  const [FileList, setFileList] = useState<File[]>([]);
+  const FileRef = useRef(null);
+  useEffect(() => {
+    if (FileRef.current) {
+      // @ts-ignore
+      FileRef.current.value = "";
+    }
+  }, [FileList]);
+  return (
+    <div className="drawer">
+      <input id="my-drawer" type="checkbox" className="drawer-toggle" />
+      <div className="drawer-content">
+        <label htmlFor="my-drawer" className="btn btn-ghost drawer-button">
+          上传图片
+        </label>
+      </div>
+      <div className="drawer-side">
+        <label
+          htmlFor="my-drawer"
+          aria-label="close sidebar"
+          className="drawer-overlay"
+        />
+        <ul className="menu bg-base-200 text-base-content min-h-full w-80 p-4">
+          <li>
+            <input
+              ref={FileRef}
+              onChange={(e) => {
+                e.target.files?.[0] &&
+                  setFileList((old) => {
+                    return e.target.files?.[0]
+                      ? [...old, e.target.files?.[0]]
+                      : old;
+                  });
+              }}
+              type="file"
+              className="file-input file-input-ghost w-full max-w-xs"
+            />
+          </li>
+          <li className="m-2 inline-flex justify-between">
+            <div className="btn">生成</div>
+          </li>
+          {FileList.map((item) => {
+            const url = URL.createObjectURL(item);
+            return (
+              <li key={url} className="m-2">
+                <img src={url} />
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Drawer;