Генерация сетки и деление с помощью CSS / JS / PHP

Question

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

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

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

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

Answer 1

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

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

Answer 2

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