All examples By author By category About

gmaclennan

Fast long scrolling image grid

This is an implementation of a long-scrolling image grid. You should be able to smoothly scroll through 500,000 images from Flickr (you will see repeats because flickr only returns 4,000 images from a search). The images will delay when first loading, but once your browser has cached the images scrolling should be pretty smooth.

The trick to keeping it smooth is by only modifying CSS properties that are cheap to animate and by minimizing modifications to the DOM by reusing our exit nodes as enter nodes.

A full page of images (the same height as window height) is rendered above and below the viewable area. In addition, empty rows with a placeholder background are padded around for an additional 2 x window height. This is useful for mobile, which will not fire a scroll event until you stop scrolling.