Grid generation & division with css/js/php

问题:

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!

回答1:

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

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

回答2:

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?