This is a step by step tutorial of how I implemented Scrubbable Photos Grid in JavaScript.

Google Photos uses virtual scrubbable photos grid. Scrubbable photos grid is laying out all your photos in grid so that users can jump to any random year/month/day in their timeline. This grid is virtual so that we are efficiently using the user’s resources like cpu, memory, disk and network.

In this blog post I will cover how to implement such a grid in JavaScript, whether we can substitute this with a simple navigation mechanism for jumping to random year/month/day is separate design discussion all together.

This implementation will use many techniques to make this virtual grid as close to actual grid including

• Estimating and maintaining grid height as close to actual
• Loading only visible photos to DOM
• Detaching not visible photos from DOM
• Positioning photos absolutely inside grid
• Adjusting scroll position to compensate layout shifts in some scenarios

#web-development #programming #javascript