2

I am working on a web project, and I am thinking on how to best approach the following scenario:

I have a bunch of images in a database and I want to load this in a grid. High ranked images need to have a bigger canvas, while lower/not ranked ones don't. The size of the images are not standard so it could be either a portrait or a landscape picture with each different sizes. The aspect ratio needs to remain intact, and the window needs to be totally filled horizontally (with a width of 100%). Users can scroll vertically.

To give you an idea of the division of the fields in the grid, I have attached a quick wireframe.grid division

Do you guys have an idea on how to approach this best? I was thinking maybe I should "standardize" a few rows. And place the rows randomly so that it does not look pre-set. But this is obviously not really calculated. Any thoughts are appreciated!

dandoen
  • 1,647
  • 5
  • 26
  • 44
  • 1
    Are you looking for something like this: http://css-tricks.com/13372-seamless-responsive-photo-grid/ – Alex Aug 09 '11 at 14:00
  • Awesome! thanks for sharing, I'll look at it right away. I probably need to customize it so that higher ranked images are shown relatively bigger. But this is definitely a push in the right direction! – dandoen Aug 09 '11 at 14:04

2 Answers2

1

Ended up using Masonry http://masonry.desandro.com/

I set the width of each individual column, by dividing the window.width by 5.

dandoen
  • 1,647
  • 5
  • 26
  • 44
0

If this grid is working for you http://css-tricks.com/13372-seamless-responsive-photo-grid/ you can look for a 1d bin-packing algorithm. This algorithm tiles the screen into vertical bins of the same width. Then it looks into your collection for the first-fit, the best-fit, next-fit or the worst-fit. You can combine each method with a random order, a decreasing order, or an increasing order. This is a very hard problem to solve, maybe you want to try a brute-force solution?

Micromega
  • 12,486
  • 7
  • 35
  • 72