Masonry

App.tsx

import { useEffect, useMemo, useRef, useState } from "react";

function App() {
  const data = Array.from({ length: 7 });
  const [positions, setPositions] = useState<
    Array<{ left: number; top: number }>
  >([]);
  const containerRef = useRef<HTMLDivElement>(null);
  const heights = useRef<Array<number>>(
    Array.from({ length: 10 }, () => Math.random() * 801)
  );
  useEffect(() => {
    const heights = [...containerRef.current!.children].map(
      (i) => i.clientHeight
    );
    console.log(heights);
    const gap = 20;
    const width = 300;
    const cols = 3;
    let _positions: Array<{ left: number; top: number }> = [];
    for (let i = 0; i < heights.length; i++) {
      const left = (i % cols) * (width + gap);
      const top =
        i < cols ? 0 : _positions[i - cols].top + heights[i - cols] + gap;
      console.log(i, left, top);
      _positions.push({ left, top });
    }
    setPositions(_positions);
  }, []);

  return (
    <div ref={containerRef} className="relative w-[960px]">
      {data.map((_, index) => (
        <div
          key={index}
          className="absolute top-0 left-0 w-[300px] bg-slate-300"
          style={{ height: heights.current[index], ...positions[index] }}
        >
          {index}
        </div>
      ))}
    </div>
  );
}

export default App;

// 제네레이터로 구하면 되는구나 (-ㅁ- ->?)