add gallery

package.json

@@ -24,7 +24,6 @@
     "sass": "^1.58.0",
     "unstated-next": "^1.1.0",
     "uuid": "^9.0.0",
-    "waterfalljs-layout": "^0.1.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/assets/data/gallery.js

@@ -0,0 +1,108 @@
+import pic0 from "../pics/gallery/IMG_0796.jpg";
+import pic1 from "../pics/gallery/IMG_6390.jpg";
+import pic2 from "../pics/gallery/IMG_6392.jpg";
+import pic3 from "../pics/gallery/IMG_6393.jpg";
+import pic4 from "../pics/gallery/IMG_8547.jpg";
+import pic5 from "../pics/gallery/IMG_8548.jpg";
+import pic6 from "../pics/gallery/IMG_8549.jpg";
+import pic7 from "../pics/gallery/JSDC2011.jpg";
+import pic8 from "../pics/gallery/JSDC2012.jpg";
+import pic9 from "../pics/gallery/dsc_0001.jpg";
+import pic10 from "../pics/gallery/dsc_0003.jpg";
+import pic11 from "../pics/gallery/dsc_0235.jpg";
+import pic12 from "../pics/gallery/dsc_0238.jpg";
+import pic13 from "../pics/gallery/dsc_0243.jpg";
+import pic14 from "../pics/gallery/jsdc2015_001.jpg";
+import pic15 from "../pics/gallery/jsdc2015_002.jpg";
+import pic16 from "../pics/gallery/jsdc2015_003.jpg";
+
+const gallery = {
+  pic: [
+    {
+      title: "",
+      content: "",
+      img: pic0,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic1,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic2,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic3,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic4,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic5,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic6,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic7,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic8,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic9,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic10,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic11,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic12,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic13,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic14,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic15,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic16,
+    }
+  ],
+};
+export default gallery;

src/assets/pics/gallery/readimg.js

@@ -0,0 +1,26 @@
+const fs = require("fs");
+
+let res = "";
+let json = `const gallery = {
+    pic: [`;
+
+let jsonEnd = `
+],
+};`;
+fs.readdir("./", (err, files) => {
+  files.forEach((file, index) => {
+    if (file === "readimg.js") {
+      return;
+    }
+    console.log(file);
+    res += `import pic${index} from "../pics/gallery/${file}";\n`;
+    json += `{
+    title: "",
+    content: "",
+    img: pic${index}
+  },`;
+  });
+
+  console.log(res);
+  console.log(json + jsonEnd);
+});

src/assets/stylesheets/gallery.scss

@@ -0,0 +1,40 @@
+@font-face {
+  font-family: itrFont;
+  src: url(../font/LeagueSpartan-ExtraBold.ttf);
+}
+
+@font-face {
+  font-family: itrFontMedium;
+  src: url(../font/LeagueSpartan-Medium.ttf);
+}
+
+.gallery {
+  background-color: #232323;
+  width: 100%;
+  min-height: 100vh;
+  height: auto;
+  opacity: 100%;
+  overflow-x: hidden;
+  display: flex;
+  -webkit-animation: fade 0.9s ease-in;
+  -moz-animation: fade 0.9s ease-in;
+  -ms-animation: fade 0.9s ease-in;
+  -o-animation: fade 0.9s ease-in;
+  animation: fade 0.9s ease-in;
+  background: linear-gradient(#3b3b3b, #1a1a1a);
+}
+
+.gallery_wrap {
+  flex-wrap: wrap;
+  padding: 24px;
+  margin-left: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+}
+.gallery__title {
+  margin: 20px 0 20px 20px;
+  font-family: itrFontMedium;
+  color: #fff;
+  text-align: center;
+}

src/assets/stylesheets/project.scss

@@ -33,7 +33,7 @@
   justify-content: start;
 }
 .projects__title {
-  margin: 20px 0 0 20px;
+  margin: 20px 0 20px 20px;
   font-family: itrFontMedium;
   color: #fff;
   text-align: center;
@@ -49,8 +49,10 @@
   width: 100vw;
   height: auto;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding-top: 24px;
 }
 
 .project__content__main__container {
@@ -58,13 +60,11 @@
   border-radius: 10px;
   background-color: rgb(66, 66, 66);
   box-sizing: border-box;
-  height: auto;
   display: flex;
   flex-direction: column;
   transition: 0.3s;
   cursor: default;
   overflow: hidden;
-  margin: 0 16px 16px 0;
 }
 .project_item_content {
   flex-grow: 1;

src/assets/stylesheets/waterfall.scss

@@ -1,20 +1,8 @@
-#react-waterfall-comps li > div {
-  transition: all 0.5s;
-  position: relative;
-  border-radius: 10px;
-  background-color: rgb(66, 66, 66);
-  padding: 10px;
+.waterfallContainer {
   display: flex;
-  flex-direction: column;
-  transition: 0.3s;
-  cursor: pointer;
-}
-#react-waterfall-comps li > div:hover {
-  transform: translateY(-6px);
-  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
-  transition: all 0.3s;
-  background-color: #666666;
-}
-#react-waterfall-comps li > div > img {
-  width: 100%;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  .waterfallItem {
+    margin-bottom: 12px;
+  }
 }

src/components/AppOuter.js

@@ -3,9 +3,15 @@ import DropdownContainer from "../components/DropdownContainer";
 import GlobalStore from "../store/global";
 import NavBar from "../components/NavBar";
 import Footer from "../components/Footer";
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
 
 const AppOuter = ({ children }) => {
   const { isHamburger, setIsHamburger } = useContainer(GlobalStore);
+  const location = useLocation();
+  useEffect(() => {
+    setIsHamburger(false);
+  }, [location.pathname]);
   return (
     <div className="container">
       {isHamburger ? (

src/components/Gallery.js

@@ -1,22 +1,62 @@
-import React, { Component } from "react";
-import backgroundVideo from "../assets/video.mp4";
-import "../assets/stylesheets/home.scss";
+import React, { useEffect, useMemo } from "react";
+import "../assets/stylesheets/gallery.scss";
+import { useContainer } from "unstated-next";
+import GlobalStore from "../store/global";
+import gallery from "../assets/data/gallery";
+import WaterfallPosition from "./hooks/waterfall";
+import { Image } from "antd";
 
-export default class Gallery extends Component {
-  render() {
+const Render = ({ onLoad, data, sizeRef }) => {
   return (
-      <div className="home">
-        <video autoPlay loop muted className="home__video">
-          <source src={backgroundVideo} type="video/mp4" />
-        </video>
-        <div className="home__content">
-          <label className="home__content__title">
-            ILLINOIS TECH
-            <br />
-            ROBOTICS
-          </label>
+    <div className="gallery__content">
+      <Image
+        onLoad={() => {
+          setTimeout(() => {
+            onLoad(sizeRef.current.size);
+          }, 100);
+        }}
+        onError={() =>
+          setTimeout(() => {
+            onLoad(sizeRef.current.size);
+          }, 100)
+        }
+        width={"100%"}
+        src={data.img}
+      />
+    </div>
+  );
+};
+
+const Gallery = () => {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  const { bodySize } = useContainer(GlobalStore);
+  const count = useMemo(() => {
+    if (bodySize.width > 850) {
+      return 3;
+    }
+    if (bodySize.width > 650) {
+      return 2;
+    }
+    return 1;
+  }, [bodySize]);
+  return (
+    <div className="gallery">
+      <div className="gallery__content">
+        <div className="gallery__content__main">
+          <div>
+            <h1 className="gallery__title">Gallery</h1>
+            <WaterfallPosition
+              columnNumber={count}
+              list={gallery.pic}
+              Render={Render}
+            />
+          </div>
+        </div>
       </div>
     </div>
   );
-  }
-}
+};
+export default Gallery;

src/components/Projects.js

@@ -1,17 +1,67 @@
 import React, { useEffect, useMemo } from "react";
-import { AnimationOnScroll } from "react-animation-on-scroll";
 import "../assets/stylesheets/project.scss";
 import { useContainer } from "unstated-next";
 import GlobalStore from "../store/global";
-import { Image } from 'antd';
-import projects from '../assets/data/projects';
-
+import projects from "../assets/data/projects";
+import WaterfallPosition from "./hooks/waterfall";
+import { Image } from "antd";
+const Render = ({ onLoad, data, sizeRef }) => {
+  return (
+    <div className="project__content__main__container">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+      >
+        <h3
+          style={{
+            fontFamily: "itrFontMedium",
+            fontSize: "25px",
+            color: "#fff",
+            marginBottom: 12,
+          }}
+        >
+          {data.title}
+        </h3>
+        <h3
+          style={{
+            fontFamily: "itrFontMedium",
+            fontSize: "25px",
+            color: "#fff",
+            marginBottom: 12,
+          }}
+        >
+          {data.sub}
+        </h3>
+      </div>
+      <div className="project_item_content">
+        <Image
+          onLoad={() => {
+            setTimeout(() => {
+              onLoad(sizeRef.current.size);
+            }, 500);
+          }}
+          onError={() =>
+            setTimeout(() => {
+              onLoad(sizeRef.current.size);
+            }, 500)
+          }
+          width={"100%"}
+          src={data.img}
+        />
+        <span>{data.content}</span>
+      </div>
+    </div>
+  );
+};
 const Project = () => {
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
 
-  const {bodySize} = useContainer(GlobalStore);
+  const { bodySize } = useContainer(GlobalStore);
   const count = useMemo(() => {
     if (bodySize.width > 850) {
       return 3;
@@ -25,77 +75,22 @@ const Project = () => {
     <div className="project">
       <div className="project__content">
         <div className="project__content__main">
-          <AnimationOnScroll
-            animateIn="animate__fadeInDown"
-            animateOnce="true"
-            duration={1}
-            delay={0}
-          >
-            <h1 className="projects__title">Active Projects</h1>
-            <div className="projects_wrap" size={16}>
-              {projects.active.map((item) => (
-                <div
-                  className="project__content__main__container"
-                  style={{ width: `calc(${100 / count}% - 16px)` }}
-                >
-                  <div style={{ display: 'flex', flexDirection: 'row', justifyContent:'space-between'  }}>
-                    <h3 style={{ fontFamily: "itrFontMedium", fontSize: '25px', color: "#fff", marginBottom: 12 }}>{item.title}</h3>
-                    <h3 style={{ fontFamily: "itrFontMedium", fontSize: '25px', color: "#fff", marginBottom: 12 }}>{item.sub}</h3>
-                  </div>
-                  <div className="project_item_content">
-                    <Image className="project_item_content_image" width={"100%"} src={item.img}></Image>
-                    <span>{item.content}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-            <h1 className="projects__title">Retired Projects</h1>
-            <div className="projects_wrap" size={16}>
-              {projects.inactive.map((item) => (
-                <div
-                  className="project__content__main__container"
-                  style={{ width: `calc(${100 / count}% - 16px)`}}
-                >
-                  <div style={{ display: 'flex', flexDirection: 'row', justifyContent:'space-between'  }}>
-                    <h3 style={{ fontFamily: "itrFontMedium", fontSize: '25px', color: "#fff", marginBottom: 12 }}>{item.title}</h3>
-                    <h3 style={{ fontFamily: "itrFontMedium", fontSize: '25px', color: "#fff", marginBottom: 12 }}>{item.sub}</h3>
-                  </div>
-                  <div className="project_item_content">
-                    <Image className="project_item_content_image" width={"100%"} src={item.img}></Image>
-                    <span>{item.content}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-            {/* <div
-              style={{
-                height: "100vh",
-                width: "100vw",
-                border: "1px solid",
-                marginTop: "30px",
-                overflowY: "scroll",
-              }}
-            >
-              <Waterfall
-                columnWidth={236}
-                columnCount={2}
-                columnGap={24}
-                rowGap={24}
-                onChangeUlMaxH={(h) => (ulMaxHRef.current = h)}
-              >
-                {images.map((item, index) => {
-                  return (
-                    <li key={index} onClick={() => alert("图片地址为:" + item)}>
           <div>
-                        {index + 1}
-                        <img src={item} alt="" />
+            <h1 className="projects__title">Active Projects</h1>
+            <WaterfallPosition
+              columnNumber={count}
+              list={projects.active}
+              Render={Render}
+            />
+          </div>
+          <div>
+            <h1 className="projects__title">Retired/Inactive Projects</h1>
+            <WaterfallPosition
+              columnNumber={count}
+              list={projects.inactive}
+              Render={Render}
+            />
           </div>
-                    </li>
-                  );
-                })}
-              </Waterfall>
-            </div> */}
-          </AnimationOnScroll>
         </div>
         {/* <WaterfallPositionDemo /> */}
       </div>

src/components/Waterfall.js

@@ -1,71 +0,0 @@
-import React, { useState, useRef } from "react";
-import Waterfall from "waterfalljs-layout/react";
-import "../assets/stylesheets/waterfall.scss";
-
-const defimages = [
-  "https://picsum.photos/640/200/?random",
-  "https://picsum.photos/360/640/?random",
-  "https://picsum.photos/480/720/?random",
-  "https://picsum.photos/480/640/?random",
-  "https://picsum.photos/360/?random",
-  "https://picsum.photos/360/520/?random",
-  "https://picsum.photos/520/360/?random",
-  "https://picsum.photos/520/360/?random",
-  "https://picsum.photos/520/360/?random",
-  "https://picsum.photos/720/640/?random",
-];
-
-export default function WaterfallPositionDemo() {
-  const [images, setImages] = useState(defimages);
-  const ulMaxHRef = useRef(0);
-
-  const handleSearchImage = async () => {
-    function random(min, max) {
-      return min + Math.floor(Math.random() * (max - min + 1));
-    }
-    const arr = [];
-    for (let i = 0; i < 9; i++) {
-      const imgSrc = `${defimages[i]}=${random(1, 10000)}`;
-      arr.push(imgSrc);
-    }
-    setImages((prev) => [...prev, ...arr]);
-  };
-  return (
-    <div
-      style={{
-        height: "600px",
-        width: "520px",
-        border: "1px solid",
-        marginTop: "30px",
-        overflowY: "scroll",
-      }}
-    >
-      <Waterfall
-        columnWidth={236}
-        columnCount={2}
-        columnGap={24}
-        rowGap={24}
-        onChangeUlMaxH={(h) => (ulMaxHRef.current = h)}
-      >
-        {images.map((item, index) => {
-          return (
-            <li key={index} onClick={() => alert("图片地址为:" + item)}>
-              <div>
-                {index + 1}
-                <img src={item} alt="" />
-              </div>
-            </li>
-          );
-        })}
-      </Waterfall>
-      <div style={{ textAlign: "center" }}>
-        <button
-          onClick={() => handleSearchImage()}
-          style={{ margin: "30px auto" }}
-        >
-          LOAD MORE
-        </button>
-      </div>
-    </div>
-  );
-}

src/components/hooks/waterfall.js

@@ -0,0 +1,98 @@
+import { useDebounce, useSize, useThrottleFn } from "ahooks";
+import React, { useRef, useEffect, useState } from "react";
+import "../../assets/stylesheets/waterfall.scss";
+
+const WaterfallItem = ({ data, onLoad, Render }) => {
+  const ref = useRef();
+  const size = useSize(ref);
+  const sizeRef = useRef({});
+  useEffect(() => {
+    sizeRef.current.size = size;
+  }, [size]);
+  return (
+    <div className="waterfallItem" ref={ref}>
+      <Render
+        onLoad={() => {
+          setTimeout(() => {
+            onLoad(sizeRef.current.size);
+          }, 500);
+        }}
+        sizeRef={sizeRef}
+        data={data}
+      />
+    </div>
+  );
+};
+
+const useWaterfall = ({ list, columnNumber, Render }) => {
+  const stateRef = useRef({
+    heights: [],
+    loadNum: 0,
+  });
+  const onload = (index, height) => {
+    stateRef.current.heights[index] = height;
+    stateRef.current.loadNum++;
+    if (stateRef.current.loadNum <= list.length) {
+      onSize();
+    }
+  };
+  const [columns, setColumns] = useState([[], [], [], []]);
+  const onSize = () => {
+    let res = [[], [], [], []];
+    let columnHeights = [0, 0, 0, 0];
+    rendered.map((renderItem, index) => {
+      let minHeight = Infinity;
+      let minHeightIndex = 0;
+      for (let i = 0; i < columnNumber; ++i) {
+        if (minHeight > columnHeights[i]) {
+          minHeight = columnHeights[i];
+          minHeightIndex = i;
+        }
+      }
+      res[minHeightIndex].push(renderItem);
+      columnHeights[minHeightIndex] += stateRef.current.heights[minHeightIndex];
+    });
+    setColumns(res);
+  };
+  const waterfallDOM = useRef();
+  const size = useSize(waterfallDOM);
+  const { run: onSizeThrottle } = useThrottleFn(onSize, { wait: 5e2 });
+  useEffect(() => {
+    onSizeThrottle();
+  }, [size, columnNumber]);
+  const rendered = list.map((item, index) => (
+    <WaterfallItem
+      onLoad={(size) => onload(index, size.height)}
+      data={item}
+      Render={Render}
+    />
+  ));
+  return {
+    waterfallDOM,
+    columns,
+  };
+};
+
+const WaterfallPosition = ({ columnNumber, list, Render }) => {
+  const { waterfallDOM, columns } = useWaterfall({
+    columnNumber,
+    list,
+    Render,
+  });
+  return (
+    <div ref={waterfallDOM} className="waterfallContainer">
+      {columns.map((column) => {
+        return (
+          <div
+            style={{
+              width: `calc(${100 / columnNumber}% - 16px)`,
+            }}
+          >
+            {column}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+export default WaterfallPosition;

src/index.js

@@ -8,6 +8,7 @@ import reportWebVitals from "./reportWebVitals";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import ErrorRoute from "./routes/ErrorRoute";
 import GlobalStore from "./store/global";
+import GalleryRoute from "./routes/GalleryRoute";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
@@ -31,11 +32,18 @@ const router = createBrowserRouter([
     path: "/projects",
     element: <ProjectsRoute></ProjectsRoute>,
     errorElement: <ErrorRoute></ErrorRoute>,
-  }
+  },
+  {
+    path: "/gallery",
+    element: <GalleryRoute></GalleryRoute>,
+    errorElement: <ErrorRoute></ErrorRoute>,
+  },
 ]);
 
-root.render(<GlobalStore.Provider>
+root.render(
+  <GlobalStore.Provider>
     <RouterProvider router={router}></RouterProvider>
-</GlobalStore.Provider>);
+  </GlobalStore.Provider>
+);
 
 reportWebVitals();

src/routes/GalleryRoute.js

@@ -0,0 +1,12 @@
+import AppOuter from "../components/AppOuter";
+import Gallery from "../components/Gallery";
+
+const GalleryRoute = () => {
+  return (
+    <AppOuter>
+      <Gallery />
+    </AppOuter>
+  );
+};
+
+export default GalleryRoute;