How to align mosaic style images? HTML / CSS

Question

I would like to include a set of mosaic style images that are combined together through HTML5 / CSS. I also use Bootstrap and various rows, columns and divs to structure and place content - however, I cannot group my images together. I was able to align them to the extent that they are still incompatible, etc. Please see the attached image for what I am trying to achieve.

Any ideas please?

Answer 1

Use masonary.js

http://masonry.desandro.com/

Or you can encode your own js function. Here you can find a really good resource (the answer is from the one who started this madness, a third-party developer for pinterest): http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest-coms -absolute-div-stacking-layout

You can currently do this with css using the css3 column. Take a look at the example here (although this is definitely not suitable for your layout):

http://jsfiddle.net/jalbertbowdenii/7Chkz/

-moz-column-count:3; -moz-column-gap: 3%; -moz-column-width: 30%; -webkit-column-count:3; -webkit-column-gap: 3%; -webkit-column-width: 30%; column-count: 3; column-gap: 3%; column-width: 30%;