Равномерно распределять изображения по столбцам в галерее
Краткое объяснение
В настоящее время я создаю галерею с тремя столбцами, каждый столбец содержит изображения, все из которых имеют одинаковую ширину, но могут различаться по высоте.
Изображения для столбцов собираются из каталога и помещаются в массив с использованием функции PHP glob() . Это легкая часть…
Пример того, как выглядит галерея:
Проблема
Поскольку эти изображения загружаются и помещаются в столбцы динамически, существует вероятность того, что столбцы могут сильно отличаться по высоте.
Например, если в колонке 1 были помещены две портретные фотографии, а две колонковые фотографии были помещены в колонку 2, столбцы были бы очень неравномерными:
Весьма маловероятно, что столбцы будут когда-либо соответствовать по высоте, но я бы хотел, чтобы они были как можно ближе к данным изображениям и поэтому хотели бы составить алгоритм, который будет смотреть на полученные изображения и поместить их в столбцы, чтобы верните три столбца, которые как можно ближе к высоте.
Так, например, скрипт исправил бы вышеупомянутую проблему, повторно отсортировав изображения и разместив их так:
Я могу написать это, если у меня есть правильный алгоритм, я просто не могу придумать, как это сделать. Может ли кто-нибудь предложить какие-либо шаги?
Возможное решение
Один из методов, о которых я думал (я думаю, что будут лучшие способы, поскольку я думаю, что это испорчено):
- Добавьте высоту всех объединенных изображений и разделите их на количество столбцов (3). Это даст нам высоту для
- Распределите изображения в массиве столбцов и превысите высоту столбца, переполнив следующий столбец.
- Поместите любые изображения слева в первый столбец, затем второй столбец и т. Д. …
заранее спасибо
Я бы предложил что-то следующее:
- Закажите свои изображения в массив от самых высоких до самых коротких (если ваша ширина будет постоянной)
- Добавить изображение в первый массив столбцов
- Добавление изображений в следующий массив столбцов до тех пор, пока общая высота не будет равна или больше, чем предыдущий массив столбцов
- Повторяйте шаги 2 и 3 до тех пор, пока не будут использованы все изображения (вы даже можете чередовать заполнение столбцов в порядке возрастания и убывания, чтобы помочь даже разобраться)
- Перемешать массивы изображений, чтобы линии сетки отображались случайными, прежде чем добавлять изображения в столбцы
- Отрегулируйте вертикальные поля на изображениях для более коротких столбцов, чтобы они соответствовали общей высоте самого высокого столбца (вертикальное выравнивание по высоте)
Надеюсь это поможет!
Вы можете попробовать что-то подобное. Создать массив:
$totalHeight = array( 1 => 0, //Column 1 2 => 0, //Column 2 3 => 0 //Column 3 );
Добавьте изображение в столбец с наименьшим значением $ totalHeigth и увеличьте высоту этого столбца с добавленной высотой изображения.
Так что если в каком-то цикле у вас есть массив вроде этого:
$totalHeight = array( 1 => 2500, //Column 1 2 => 1950, //Column 2 3 => 2450 //Column 3 );
вы узнаете, что изображение нужно добавить в колонку 2.