Max Visible Pins on Screen - Find Maximum Pins Displayable in a Viewport

Question

## Round 1 - Coding

## Problem

You have a Pinterest-like masonry grid. Each pin has a fixed width but a variable height. Given the viewport width, column count, and a list of pin heights, determine the maximum number of pins that fit on screen (viewport height limit) using a greedy column-packing strategy.

```python
def max_visible_pins(
    pin_heights: list[int],
    num_columns: int,
    viewport_height: int
) -> int:
    # Assign pins one by one to the shortest column (greedy).
    # Stop when adding the next pin would cause every column to exceed viewport_height.
    # Return total pins placed.
    ...
```

```
Example:
pin_heights   = [100, 200, 150, 80, 120, 300]
num_columns   = 3
viewport_height = 350

Columns after greedy placement:
  Pin 0 (100) -> col 0: [100]
  Pin 1 (200) -> col 1: [200]
  Pin 2 (150) -> col 2: [150]
  Pin 3 (80)  -> col 0: [100,80=180]
  Pin 4 (120) -> col 2: [150,120=270]
  Pin 5 (300) -> col 1: 200+300=500 > 350, skip

max_visible_pins(...) -> 5
```

## Follow-ups

1. What heap operation keeps greedy column assignment efficient?
2. How would partial visibility work (pin half-visible at viewport edge still counts)?
3. How would you handle a responsive layout that changes `num_columns` on resize?
4. If pins must be shown in insertion order, does greedy still work?

Max Visible Pins on Screen - Find Maximum Pins Displayable in a Viewport

Question Details

Full Details

Topics

More from Pinterest