Generación de grillas y división con css / js / php

Estoy trabajando en un proyecto web y estoy pensando en cómo abordar mejor el siguiente escenario:

Tengo un montón de imágenes en una base de datos y quiero cargar esto en una grilla. Las imágenes de alto rango deben tener un canvas más grande, mientras que las más bajas / no clasificadas no. El tamaño de las imágenes no es estándar, por lo que podría ser un retrato o una imagen de paisaje con diferentes tamaños. La relación de aspecto debe permanecer intacta y la ventana debe estar totalmente llena horizontalmente (con un ancho del 100%). Los usuarios pueden desplazarse verticalmente.

Para darte una idea de la división de los campos en la grilla, he adjuntado un wireframe rápido. división de la red

¿Ustedes tienen una idea sobre cómo abordar esto mejor? Estaba pensando que tal vez debería “estandarizar” algunas filas. Y coloque las filas al azar para que no parezcan preestablecidas. Pero esto obviamente no está realmente calculado. ¡Cualquier pensamiento es apreciado!

Terminó usando Masonry http://masonry.desandro.com/

Establecí el ancho de cada columna individual, dividiendo window.width por 5.

Si esta cuadrícula funciona para usted http://css-tricks.com/13372-seamless-responsive-photo-grid/ , puede buscar un algoritmo de bin de 1d. Este algoritmo azuleja la pantalla en contenedores verticales del mismo ancho. Luego busca en su colección el primer ajuste, el mejor ajuste, el siguiente ajuste o el peor ajuste. Puede combinar cada método con un orden aleatorio, un orden decreciente o un orden creciente. Este es un problema muy difícil de resolver, ¿tal vez quieres probar una solución de fuerza bruta?