modify test
This commit is contained in:
Jianqi Jin
parent
43d66d50ae
commit
a883ebe2ef
@ -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 {
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
.waterfall_outer {
|
||||
.waterfallContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
.waterfall_column {
|
||||
width: 40%;
|
||||
.waterfallItem {
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
@ -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,68 +25,15 @@ 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>
|
||||
))}
|
||||
<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>
|
||||
<WaterfallPosition columnNumber={count} list={projects.inactive} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</AnimationOnScroll>
|
||||
</div>
|
||||
{/* <WaterfallPositionDemo /> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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>;
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
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;
|
||||
let minHeight = Infinity;
|
||||
for (let tmpI = 0; tmpI < heights.length; ++tmpI) {
|
||||
if (heights[tmpI] < minHeight) {
|
||||
minHeight = heights[tmpI];
|
||||
i = tmpI;
|
||||
}
|
||||
}
|
||||
console.log("minHeight", minHeight, i);
|
||||
heights[i] += item?.size?.height || 0;
|
||||
initColumns[i].push(item);
|
||||
});
|
||||
setColumns(initColumns);
|
||||
|
||||
console.log("minHeight", initColumns);
|
||||
onSizeRef.current = false;
|
||||
};
|
||||
const columnsDebounce = useDebounce(columns, {
|
||||
wait: 50,
|
||||
});
|
||||
return (
|
||||
<div className="waterfall_outer">
|
||||
{Object.keys(columnsDebounce).map((key) => {
|
||||
const item = columnsDebounce[key];
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
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();
|
||||
}
|
||||
};
|
||||
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);
|
||||
useEffect(() => {
|
||||
onSize();
|
||||
}, [size, columnNumber]);
|
||||
const rendered = list.map((item, index) => (
|
||||
<WaterfallItem onLoad={(size) => onload(index, size.height)} data={item} />
|
||||
));
|
||||
return (
|
||||
<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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user