Design a Pinterest-like Masonry Grid UI System

interface CardItem {
  id: string;
  aspectRatio: number; // width / height
}

interface PositionedCard extends CardItem {
  top: number;
  left: number;
  width: number;
  height: number;
}

export function computeMasonryLayout(
  items: CardItem[],
  containerWidth: number,
  columnCount = 3,
  gap = 16
): { positions: PositionedCard[]; totalHeight: number } {
  const columnWidth = (containerWidth - (columnCount - 1) * gap) / columnCount;
  const colHeights = new Array(columnCount).fill(0);

  const positions: PositionedCard[] = items.map((item) => {
    // 1. Find the column with the minimum current height
    let shortestCol = 0;
    for (let i = 1; i < columnCount; i++) {
      if (colHeights[i] < colHeights[shortestCol]) {
        shortestCol = i;
      }
    }

    const cardHeight = columnWidth / item.aspectRatio;
    const top = colHeights[shortestCol];
    const left = shortestCol * (columnWidth + gap);

    // 2. Update the shortest column's cumulative height
    colHeights[shortestCol] += cardHeight + gap;

    return {
      ...item,
      top,
      left,
      width: columnWidth,
      height: cardHeight,
    };
  });

  return {
    positions,
    totalHeight: Math.max(...colHeights),
  };
}

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

export function useMasonryVirtualizer(
  positions: PositionedCard[],
  scrollTop: number,
  viewportHeight: number,
  buffer = 600
) {
  return useMemo(() => {
    const minVisibleY = scrollTop - buffer;
    const maxVisibleY = scrollTop + viewportHeight + buffer;

    // Filter cards intersecting the active window
    return positions.filter(
      (card) => card.top + card.height >= minVisibleY && card.top <= maxVisibleY
    );
  }, [positions, scrollTop, viewportHeight, buffer]);
}

export function MasonryGrid({ cards, containerWidth }: { cards: CardItem[]; containerWidth: number }) {
  const [scrollTop, setScrollTop] = useState(0);

  const { positions, totalHeight } = useMemo(
    () => computeMasonryLayout(cards, containerWidth, 3, 16),
    [cards, containerWidth]
  );

  const visibleCards = useMasonryVirtualizer(positions, scrollTop, window.innerHeight);

  return (
    <div style={{ position: "relative", height: totalHeight, width: containerWidth }}>
      {visibleCards.map((card) => (
        <div
          key={card.id}
          style={{
            position: "absolute",
            transform: `translate3d(${card.left}px, ${card.top}px, 0)`,
            width: card.width,
            height: card.height,
            willChange: "transform",
          }}
        >
          <img
            src={`/api/image/${card.id}`}
            alt=""
            loading="lazy"
            style={{ width: "100%", height: "100%", objectFit: "cover" }}
          />
        </div>
      ))}
    </div>
  );
}