CODEWITHSUNDEEP
javascriptalgorithmlayoutresponsive-designimage-gallery
Rolf
Rolf

Reputation: 5743

Fixed row-height, flexible width, justified image gallery

I'm working on a full page, flexible width image gallery.

https://weknowtoomuch.com/projects/nga/projects-grid

Now, you probably start to get an idea of what I'm trying to do. The page in it's current state is rather good, but the spaces between the images (blank spaces around the center of rows) are a bit too big.

The way I have implemented that is very simple, just distribute images by alternating their float property between left and right.

The effect that I'm trying to achieve, ideally, would be something closer to this:

http://images.search.yahoo.com/search/images;_ylt=AwrB8p4dRulSGDgAuCeZDWNH;_ylu=X3oDMTBwazJlZjZ1BHNlYwNzdHJtBHNsawN0aXRsZQRjcG9zAzA-?p=2014+Super+Bowl+pictures&aq=Trending&sid=743e5f15-0b3b-3483-ada1-c617f8754761&spos=0&norw=1&

I tried some research, but the solutions that I found involve fitting all images by changing row height, which I'm trying to avoid. Some tall images might also have to occupy two rows, which would also probably not work well with the changing row height technique.

What I'm hoping for, maybe, is an algorithm that would let me distribute images in a way that white spaces are minimized, and also randomize the location of white space blocks.

I am not using jQuery in this project, but I could do an exception if there is no other reasonable way!

A complete solution that fulfills all the above criteria would also be a good alternative to implementing an algorithm myself, in case you have a tip in that direction...

A final note: some minimal horizontal cropping of images is also acceptable.

Hoping to get some tips, leads, and other useful feedback, and that this would help someone else sometime.

Upvotes: 0

Views: 1202

Answers (1)

M Oehm
M Oehm

Reputation: 29126

Strangely, a similar question was asked yesterday. In my answer I have presented a draft for a layout engine that adjusts the height of each column to achieve a tile effect.

You don't want to adjust the heights, but the mechanism could perhaps be altered to fit your needs. If you don't update the heights, you can achieve justification by distributing the remaining space among the gaps between the photos. That can create very large gaps which don't look nice. Alternatively, you can achieve a more compact look by centering the rows at the cost of having ragged margins. Still, this looks better in my opinion.

I've created a scrappy prototype (that does not work in IE and has other issues). It centers the images, but you can download it and alter the gap and center parameters.

I know that this is not an answer to your question, more like a suggestion. There are bin-packing algorithms for evenly distributing the images over the rows. Also, the issue of the double-row images is not solved.

Are your photos of arbitrary size or do you use, say, three or four standard sizes? If so, possible layouts could be precalculated and then applied on the fly.

Upvotes: 2

Related Questions