Image Collage

Forever, we didn't have a way to accomplish this without some sort of JavaScript or jQuery. There are plugins available that allow you to do this with very little knowledge of jQuery. Check out Masonry. However, be aware that if a user has their browser javascript turned off, this layout will break.

More recently, Flexbox has given us the opportunity to accomplish this in CSS. However, flexbox is still pretty new. You need to check browser support and decide if this will work today for you. If a user has a browser that doesn't support flexbox, this layout will break. Flexbox will be the future for CSS though.

Depending on your user scenario, and if you felt comforatable enough to set this up, you could use Modernizr to check for flexbox support of the users browser. Modernizr comes bundled with YepNopeJS, so if their browser supports Flexbox, you use yepnope.js to send them the Flexbox CSS layout, and if it fails to support flexbox you send them the jQuery Masonry layout.

This would ideally cover all of your bases. But it's also probably a little bit complex right now. However, your layout you want to achieve is fairly complex for browsers until Flexbox becomes a little bit support. Basically waiting for today's browsers to become "legacy" browsers, and today's "legacy" browsers to become obsolete.

Thanks! I'll toy with these suggestions, but on a design note, is there a more stable, less complex to set-up layout you'd recommend? I just don't want a boring grid-like gallery where every image is the same size.

You could do some manual manipulation of the images and or their parent/containers with absolute positioning. That would be a way to accomplish something like this very reliably. The problem is it will become somewhat of a maintenance nightmare, as you'll have to figure out how to size and crop objects to get them to fit together, and get them to fit together my forcing their position. Making the responsive (if that would be your goal) would be another issue.

The nice part about those options is it makes the browser do all the calculating.

Here's an idea. It's kinda a pain to do though. http://codepen.io/kevink/pen/ClioB

Also, check this: http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox

I just tried that last one actually, but it didn't really accomplish what I wanted after adding more and more images. Plus the bottoms of the columns still didn't line up.

Thanks for the help though. Looks like I need to figure out Masonry.

I don't know if this will help, but if you download the source files, you'll see they used masonry here. http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/