diff --git a/src/assets/stylesheets/project.scss b/src/assets/stylesheets/project.scss
index b33d0fa..920ceeb 100644
--- a/src/assets/stylesheets/project.scss
+++ b/src/assets/stylesheets/project.scss
@@ -32,7 +32,7 @@
   justify-content: start;
 }
 .projects__title {
-  margin: 20px 0 0 20px;
+  margin: 20px 0 20px 20px;
   font-family: itrFontMedium;
   color: #fff;
 }
@@ -47,8 +47,10 @@
   width: 100vw;
   height: auto;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding-top: 24px;
 }
 
 .project__content__main__container {
diff --git a/src/assets/stylesheets/waterfall.scss b/src/assets/stylesheets/waterfall.scss
index e214aad..ec50dd3 100644
--- a/src/assets/stylesheets/waterfall.scss
+++ b/src/assets/stylesheets/waterfall.scss
@@ -1,8 +1,7 @@
-.waterfall_outer {
+.waterfallContainer {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
-  .waterfall_column {
-    width: 40%;
+  .waterfallItem {
+    margin: 3px;
   }
 }
\ No newline at end of file
diff --git a/src/components/Projects.js b/src/components/Projects.js
index 9682c89..848522e 100644
--- a/src/components/Projects.js
+++ b/src/components/Projects.js
@@ -1,11 +1,10 @@
-import React, { useEffect, useMemo } from "react";
-import { AnimationOnScroll } from "react-animation-on-scroll";
+import React, { forwardRef, useEffect, useMemo } from "react";
 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 WaterfallPositionDemo from "./Waterfall";
+import WaterfallPosition from "./Waterfall";
 
 const Project = () => {
   useEffect(() => {
@@ -26,67 +25,14 @@ const Project = () => {
     <div className="project">
       <div className="project__content">
         <div className="project__content__main">
-          {/* <WaterfallPositionDemo
-            columnNumber={count}
-            list={projects.active.map((item) => {
-              return {
-                itemRender: (
-                  <div
-                    className="project__content__main__container"
-                  >
-                    <h3 style={{ color: "#fff", marginBottom: 12 }}>
-                      {item.title}
-                    </h3>
-                    <div className="project_item_content">
-                      <Image width={"100%"} src={item.img}></Image>
-                      <span>{item.content}</span>
-                    </div>
-                  </div>
-                ),
-              };
-            })}
-          /> */}
-          <AnimationOnScroll
-            animateIn="animate__fadeInDown"
-            animateOnce="true"
-            duration={1}
-            delay={0}
-          >
+          <div>
             <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)` }}
-                >
-                  <h3 style={{ color: "#fff", marginBottom: 12 }}>
-                    {item.title}
-                  </h3>
-                  <div className="project_item_content">
-                    <Image width={"100%"} src={item.img}></Image>
-                    <span>{item.content}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
+            <WaterfallPosition columnNumber={count} list={projects.active} />
+          </div>
+          <div>
             <h1 className="projects__title">Retired/Inactive Projects</h1>
-            <div className="projects_wrap" size={16}>
-              {projects.inactive.map((item) => (
-                <div
-                  className="project__content__main__container"
-                  style={{ width: `calc(${100 / count}% - 16px)` }}
-                >
-                  <h3 style={{ color: "#fff", marginBottom: 12 }}>
-                    {item.title}
-                  </h3>
-                  <div className="project_item_content">
-                    <Image width={"100%"} src={item.img}></Image>
-                    <span>{item.content}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </AnimationOnScroll>
+            <WaterfallPosition columnNumber={count} list={projects.inactive} />
+          </div>
         </div>
         {/* <WaterfallPositionDemo /> */}
       </div>
diff --git a/src/components/Waterfall.js b/src/components/Waterfall.js
index 9a38fa0..28d3a95 100644
--- a/src/components/Waterfall.js
+++ b/src/components/Waterfall.js
@@ -1,121 +1,92 @@
-import {
-  useDebounce,
-  useDebounceFn,
-  useSetState,
-  useSize,
-  useThrottle,
-  useThrottleFn,
-} from "ahooks";
-import React, { useRef, useEffect } from "react";
+import { useSize } from "ahooks";
+import React, { useRef, useEffect, useState } from "react";
 import "../assets/stylesheets/waterfall.scss";
+import { Image } from "antd";
 
-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",
-];
-
-const Item = ({ itemRender, onSize }) => {
-  const itemRef = useRef();
-  const size = useSize(itemRef.current);
+const WaterfallItem = ({ data, onLoad }) => {
+  const ref = useRef();
+  const size = useSize(ref);
+  const sizeRef = useRef({});
   useEffect(() => {
-    onSize(size);
+    sizeRef.current.size = size;
   }, [size]);
-  return <div ref={itemRef}>{itemRender}</div>;
+  return (
+    <div className="waterfallItem" ref={ref}>
+      <div className="project__content__main__container">
+        <h3 style={{ color: "#fff", marginBottom: 12 }}>{data.title}</h3>
+        <div className="project_item_content">
+          <Image
+            onLoad={() => {
+              setTimeout(() => {
+                onLoad(sizeRef.current.size);
+              }, 500);
+            }}
+            alt="asd"
+            onError={setTimeout(() => {
+              onLoad(sizeRef.current.size);
+            }, 500)}
+            width={"100%"}
+            src={data.img}
+          />
+          <span>{data.content}</span>
+        </div>
+      </div>
+    </div>
+  );
 };
 
-export default function WaterfallPositionDemo({ columnNumber, list }) {
-  const [columns, setColumns] = useSetState(
-    new Array(columnNumber).fill(0).map((item) => [])
-  );
-  const listRef = useRef(list);
-  // useEffect(() => {
-  //   listRef.current = list;
-  // }, [list]);
-  useEffect(() => {
-    // fill the columns
-    const initColumns = new Array(columnNumber).fill(0).map((item) => []);
-    list.forEach((item, index) => {
-      item.size = {
-        width: 0,
-        height: 0,
-      };
-      item.index = index;
-      const i = index % columnNumber;
-      initColumns[i].push(item);
-    });
-    listRef.current = list;
-    setColumns(initColumns);
-  }, []);
-  const onSizeRef = useRef(null);
-  const onSize = ({ item: itm, columnIndex: key, index, size }) => {
-    if (onSizeRef.current) {
-      return;
+const WaterfallPosition = ({ columnNumber, list }) => {
+  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();
     }
-    onSizeRef.current = true;
-    if (itm && size && listRef.current[itm.index]) {
-      listRef.current[itm.index].size = size;
-    }
-    const initColumns = new Array(columnNumber).fill(0).map((item) => []);
-    const heights = new Array(columnNumber).fill(0).map((item) => 0);
-    console.log("listRef.current", listRef.current.length);
-    listRef.current.forEach((item, index) => {
-      let i = 0;
+  };
+  const [columns, setColumns] = useState([[], [], [], []]);
+  const onSize = () => {
+    let res = [[], [], [], []];
+    let columnHeights = [0, 0, 0, 0];
+    rendered.map((renderItem, index) => {
       let minHeight = Infinity;
-      for (let tmpI = 0; tmpI < heights.length; ++tmpI) {
-        if (heights[tmpI] < minHeight) {
-          minHeight = heights[tmpI];
-          i = tmpI;
+      let minHeightIndex = 0;
+      for (let i = 0; i < columnNumber; ++i) {
+        if (minHeight > columnHeights[i]) {
+          minHeight = columnHeights[i];
+          minHeightIndex = i;
         }
       }
-      console.log("minHeight", minHeight, i);
-      heights[i] += item?.size?.height || 0;
-      initColumns[i].push(item);
+      res[minHeightIndex].push(renderItem);
+      columnHeights[minHeightIndex] += stateRef.current.heights[minHeightIndex];
     });
-    setColumns(initColumns);
-
-    console.log("minHeight", initColumns);
-    onSizeRef.current = false;
+    setColumns(res);
   };
-  const columnsDebounce = useDebounce(columns, {
-    wait: 50,
-  });
+  const waterfallDOM = useRef();
+  const size = useSize(waterfallDOM);
+  useEffect(() => {
+    onSize();
+  }, [size, columnNumber]);
+  const rendered = list.map((item, index) => (
+    <WaterfallItem onLoad={(size) => onload(index, size.height)} data={item} />
+  ));
   return (
-    <div className="waterfall_outer">
-      {Object.keys(columnsDebounce).map((key) => {
-        const item = columnsDebounce[key];
+    <div ref={waterfallDOM} className="waterfallContainer">
+      {columns.map((column) => {
         return (
           <div
-            key={`${new Date()}_${key}`}
-            className="waterfall_column"
-            style={{ width: `calc(${100 / columnNumber}% - 16px)` }}
+            style={{
+              width: `calc(${100 / columnNumber}% - 16px)`,
+            }}
           >
-            {item.map((itm, index) => {
-              return (
-                <Item
-                  key={`${new Date()}_${itm.index}_${index}`}
-                  itemRender={itm.itemRender}
-                  onSize={(size) =>
-                    onSize({
-                      item: itm,
-                      columnIndex: key,
-                      index,
-                      size,
-                    })
-                  }
-                />
-              );
-            })}
+            {column}
           </div>
         );
       })}
     </div>
   );
-}
+};
+export default WaterfallPosition;