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.
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!
Ended up using Masonry http://masonry.desandro.com/
I set the width of each individual column, by dividing the window.width by 5.
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?
来源：https://stackoverflow.com/questions/6997278/grid-generation-division-with-css-js-php