Image gallery - Pinterest like layout with CSS?

Question

I'm working on a dynamic php gallery. The thumbnails will all have the same width but various heights. They'll be placed from left to right. So, I don't want to use a five columns pattern. I guess it's not possible to do it only with CSS, so maybe you know any jquery script that would do the job? I guess this kind of gallery pattern is quite common...

http://i.stack.imgur.com/Xwdx0.png

Answer 1

Here's the pure css solution using css3 columns. This isn't going to work in older browsers, read here (click). Live demo here (click).

You can use masonry.js, isotope.js, or packery.js for more compatible js solutions.

<div class="col-5">
  <div class="sm"></div>
  <div class="lg"></div>
  <div class="sm"></div>
  <div class="sm"></div>
  <div class="lg"></div>

  <div class="lg"></div>
  <div class="sm"></div>
  <div class="lg"></div>
  <div class="lg"></div>
  <div class="lg"></div>  
</div>

css:

.col-5 {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
}

.col-5 > div {
  display: inline-block;
}

.sm {
  height: 75px;
}
.lg {
  height: 125px;
}

Answer 2

You could try using/jigging a Jquery plugin like the following:

http://codecanyon.net/item/jquery-tiles-gallery/2281417

http://codecanyon.net/item/jbmarket-image-gallery/full_screen_preview/3028128?ref=lamdang

Answer 3

If you're trying to make the layout the 'pintrest' way, you can have an array of x columns and iterate through each column to check for the shortest height, and add the next box in that column.

That way you would know it works for all browsers [unless they have js disabled] and then you can style the width of the columns.