Image gallery

发布时间：2025-08-10 08:32

历史经典摄影网站：Ansel Adams Gallery， Magnum Photos #生活知识# #摄影技巧# #摄影学习网站#

This question shows research effort; it is useful and clear

Save this question.

Show activity on this post.

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

m59

43.9k14 gold badges122 silver badges139 bronze badges

asked Nov 21, 2013 at 19:48

This answer is useful

Save this answer.

Show activity on this post.

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.

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

answered Nov 21, 2013 at 20:30

m59m59

43.9k14 gold badges122 silver badges139 bronze badges

This answer is useful

Save this answer.

Show activity on this post.

answered Nov 21, 2013 at 20:25

A-frameA-frame

3012 gold badges3 silver badges8 bronze badges

This answer is useful

Save this answer.

Show activity on this post.

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.

answered Nov 21, 2013 at 20:34