CODEWITHSUNDEEP
javascriptjquerycssgallery
Coin-coin le Canapin
Coin-coin le Canapin

Reputation: 39

Image gallery - Pinterest like layout with CSS?

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...

https://i.sstatic.net/Xwdx0.png

Upvotes: 0

Views: 5316

Answers (3)

m59
m59

Reputation: 43755

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;
}

Upvotes: 1

C. S.
C. S.

Reputation: 813

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.

Upvotes: 0

A-frame
A-frame

Reputation: 301

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

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

or

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

Upvotes: 0

Related Questions