Design Masonry Layout (Pinterest-style)

Approach Tips

**Layout Algorithm:** Greedy column assignment — always place the next item in the shortest column: ```javascript function layout(items, numColumns, columnWidth, gap) { const columnHeights = new Array(numColumns).fill(0); return items.map(item => { const col = columnHeights.indexOf(Math.min(...columnHeights)); const x = col * (columnWidth + gap); const y = columnHeights[col]; columnHeights[col] += item.height + gap; return { ...item, x, y, col }; }); } ``` **Implementation Approaches (discuss tradeoffs):** | Approach | Pros | Cons | |----------|------|------| | Absolute positioning | Full control, works everywhere | Manual calculation, no reflow | | CSS `columns` | Simple, pure CSS | Poor ordering (fills column-first not row-first) | | CSS Grid + `grid-row: span N` | Native, clean | Requires known heights upfront | | **Recommended: Absolute pos** | Best for dynamic content | Needs resize observer | **Performance for 10K+ items — Virtualization:** - Only render items in the viewport + buffer (200px above/below) - Use `IntersectionObserver` to detect items entering/leaving viewport - Keep a "layout map" of all positions in memory but only mount visible DOM nodes - Recycle DOM nodes as user scrolls (object pooling) **Responsive Design:** - Calculate column count from container width: `Math.floor(width / (minColWidth + gap))` - Use `ResizeObserver` on the container to re-layout on resize - Debounce re-layout (16ms = one frame) **Image Loading (prevent layout shift):** - Require aspect ratio in the data (`width/height` from API) - Calculate display height before image loads: `displayHeight = columnWidth / aspectRatio` - Use placeholder (blurred thumbnail / solid color) until image loads - `loading="lazy"` + IntersectionObserver for below-the-fold images **What interviewers look for:** - Do you understand the core algorithm (shortest-column greedy)? - Can you discuss CSS approaches and explain *why* you chose absolute positioning? - Performance awareness: virtualization, lazy loading, resize handling - Edge cases: images failing to load, extremely tall items, dynamic content changes **Follow-ups:** - How would you animate items when the layout changes (e.g., on filter)? - How would you handle drag-and-drop reordering? - What changes for a server-rendered masonry layout (SSR)?