PHP Lang
  1. PHP Lang
  3. Генерация и деление сетки с помощью css / js / php
Intereting Posts
Laravel получает имя маршрута из заданного URL-адреса Получить первое слово в строке php the_title WordPress Сериализовать / unserialize PHP-объект-график для JSON Как удалить файл include? передать массив из jQuery в PHP (и фактически перейти на страницу после отправки) Как загрузить набор результатов MySQLi в двумерный массив? Кто должен обрабатывать условия в сложных запросах, карту данных или уровне обслуживания? Цена форматирования как запятая PHP: поиск повторяющихся слов с текстом и без него Какова наилучшая практика для включения файлов PHP? Выходной буфер Artisan не содержит весь вывод Является ли сериализация данных опасными с PDO Перенос загруженного файла на удаленный сервер Как создать параметр внутри тега select динамически с текстом ответа ajax в php? CakePHP принадлежит отношению с переменным полем «модель»

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

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

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

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

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

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

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

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