Generating and dividing a grid with css / js / php
I am working on a web project and I am thinking about the best way to approach the following scenario:
I have a bunch of images in a database and I want to load this into a grid. Highly ranked images require a larger canvas, while lower / non-ranked images do not. The size of the images is not standard, so it can be either portrait or landscape images in different sizes. The aspect ratio must remain intact and the window must be completely filled horizontally (100% wide). Users can scroll vertically.
To give you an idea of splitting fields in a grid, I've added a quick wireframe. 
Do you have an idea on how to approach this best? I thought maybe I need to "standardize" a few rows. And place the lines randomly so it doesn't look pre-defined. But this is clearly not calculated. Any thoughts are appreciated!
source to share
Completed the use of Freemasonry http://masonry.desandro.com/
I am setting the width of each individual column by dividing the window.width by 5.
source to share
If this grid works for you http://css-tricks.com/13372-seamless-responsive-photo-grid/ you can find 1d bin packing algorithm. This algorithm splits the screen into vertical cells of the same width. Then he looks into your collection for the first, best, best, or worst. You can combine each method with random order, decreasing order, or increasing order. This is a very difficult task to solve, perhaps you want to try a brute force solution?
source to share