CSS / JS：将图块左右对齐

Question

I'm having thumbnails with always the same image-width , and a possible different image-height.

Now, I want to align them all in order to have no 'gaps' in my thumbnails/tile-overview. I'm only floating them left now. But that gives the result below.

Isn't there a JS library available for this? (= align tiles with the same width, different height, without any gaps?)

Answer 1

What you're looking for is a jQuery plugin named Masonry. It's known for being a pain in the arse though. Depending on the scale of your application I'd use a CSS3 or flex-box alternative.

jQuery Masonry - http://masonry.desandro.com/

CSS3 Masonry - http://w3bits.com/css-masonry/

Flex-Box Masonry - http://thenewcode.com/844/Easy-Masonry-Layout-With-Flexbox

Hope these links help. :)

Answer 2

The still not so good column can maybe help you.. Can i use column?

 div.wrapper { -webkit-columns: 300px 2; -moz-columns: 300px 2; columns: 300px 2; -webkit-column-rule: 1px dotted rgb(0, 0, 0); -moz-column-rule: 1px dotted rgb(0, 0, 0); column-rule: 1px dotted rgb(0, 0, 0); text-align: center; } 

 <div class="wrapper"> <img src="http://lorempixel.com/image_output/nature-hc-300-450-2.jpg"> <img src="http://lorempixel.com/image_output/people-hc-300-601-10.jpg"> <img src="http://lorempixel.com/image_output/nature-hc-300-306-10.jpg"> <img src="http://lorempixel.com/image_output/abstract-qc-300-148-2.jpg"> <img src="http://lorempixel.com/image_output/cats-hc-300-627-4.jpg"> <img src="http://lorempixel.com/image_output/technics-hc-300-460-8.jpg"> </div>