jaredLunde / jaredLunde/masonic
Allow to pass width / height size data of each item, use (trust) them as calculating the layout.
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 63
- PR merge metrics
- No merged PRs in 30d
Description
I am building pinterest-like app just like others (https://grida.co/library), for my case, all the image are indexed with width/height, width/height data is available at the render time, which the masonry component don't have to rely on observer (unless window resize), the calculation / layout shift can be optimized based on this.
do you have plans for `` with width / height property? (and use that?)
e.g.
`[{id: 1, width: 100, height: 200}]` internally, the component will calculate `width per item`, then calculate item's height by
```ts
const aspect_ratio = input.width / input.height;
const height = width / aspect_ratio;
```
and pass the height value as well, and intenally use this to calculate (abs pos) the item.
also great for virtualization, without causing any layout shifting.
Contributor guide
Research direction
Start with the items API and masonry layout calculation described in the issue. Trace how item dimensions are currently obtained and how absolute positions and virtualization use them. Done means width and height input can drive derived item heights and layout without relying on observation for the initial calculation or causing layout shifts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100