Генерация и деление сетки с помощью css / js / php

Я работаю над веб-проектом, и я думаю о том, как наилучшим образом подойти к следующему сценарию:

У меня есть куча изображений в базе данных, и я хочу загрузить это в сетку. Для изображений с высоким ранжированием необходимо иметь более крупное полотно, в то время как нижние / не ранжированные – нет. Размер изображений не является стандартным, поэтому он может быть либо портретным, либо пейзажным изображением с разными размерами. Соотношение сторон должно оставаться неповрежденным, и окно должно быть полностью заполнено горизонтально (с шириной 100%). Пользователи могут перемещаться по вертикали.

Чтобы дать вам представление о разделении полей в сетке, я прикрепил быстрый каркас. разделение сетки

У вас есть идея о том, как подойти к этому лучше всего? Я думал, может быть, мне нужно «стандартизировать» несколько рядов. И поместите строки случайным образом, чтобы он не выглядел предварительно заданным. Но это явно не рассчитано. Любые мысли оцениваются!

Закончено использование масонства http://masonry.desandro.com/

Я устанавливаю ширину каждого отдельного столбца, деля окно window.width на 5.

Если эта сетка работает для вас http://css-tricks.com/13372-seamless-responsive-photo-grid/, вы можете найти алгоритм упаковки в 1d. Этот алгоритм разбивает экран на вертикальные ячейки той же ширины. Затем он заглядывает в вашу коллекцию для первой, подходящей, подходящей или самой плохой. Вы можете комбинировать каждый метод со случайным порядком, убывающим порядком или возрастающим порядком. Это очень сложная проблема, возможно, вы хотите попробовать решение грубой силы?