CODEWITHSUNDEEP
phpjavascriptcssgrid
dandoen
dandoen

Reputation: 1647

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.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!

Upvotes: 2

Views: 2550

Answers (2)

dandoen
dandoen

Reputation: 1647

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

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

Upvotes: 1

Cybercartel
Cybercartel

Reputation: 12592

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?

Upvotes: 0

Related Questions