Responsive Photo Gallery

I came across an article on Hacker News the other day that piqued my interest: The algorithm for a perfectly balanced photo gallery. A startup named Chromatic gives a rundown of how they go about algorithmically scaling and arranging photos in a gallery for a perfectly organized grid look. I liked what I saw.

Unfortunately, while the article does include a link to some code that solves “the partition problem”, they didn’t provide everything you’d need to make this work… so I decided to code it up myself. I actually passed on using their partition code and wrote my own solution from scratch. The code turned out to be pretty minimal. While this solution may not be quite as elegant as the one discussed in the article, it’s super simple and basically has the same result: a fully responsive photo gallery that organizes itself according to the container’s width. You’ll see the gallery adjust if you change the width of your browser.

Note: This code does make use of jQuery.

See the Pen Full-size, Responsive Photo Gallery by Justin Klemm (@justinklemm) on CodePen.