Image gallery

Given a list of images, fill a row with images, not exceeding a max row height.

My approach started out with how I imagined I would do this in a vector based program like Illustrator by hand.

I would layout the first item in the row, then I would resize the next piece to be the same height as the previous item. I would keep going until the row was full or overflowing. If it was overflowing, I would then squeeze the entire row to fit. Move onto the next row.

My approach in code was pretty similar. I pass through the list to resize every frame so no frame exceeds the max dimensions. Then, I go through again to build the grid. I think it makes it a bit cleaner to read but you probably could combine those steps.

More things to maybe try would be try solutions with flexbox and also make the images fade in gracefully.

Code

See the Pen WGQmGy by Diandian Xiao (@diiaann) on CodePen.