Многоколоночная фотогалерея
У меня есть фото галерея на php, которая должна отображать картинки в трех колонках. Каждое изображение будет иметь одинаковую ширину (то есть ширину столбца), но так как изменяется формат изображения, также изменяется и его высота. Изображения располагаются в полуслучайном порядке, поэтому порядок отображения (заполнение строк или столбцов) не имеет значения.
Я попытался настроить это как многостолбцовый макет CSS:
#gallerycontainer {
-webkit-column-count: 3;
-webkit-column-gap: 8px;
-moz-column-count: 3;
-moz-column-gap: 8px;
column-count: 3;
column-gap: 8px;
}
Когда все загружено, это соответствует тому, чего я хочу достичь. Проблема заключается в фазе загрузки: при загрузке одного изображения за другим и, следовательно, изменении их правильной высоты, общая высота #gallerycontainer содержимое меняется после каждой загрузки изображения, и поэтому изображения сильно перераспределяются между столбцами, создавая раздражающий визуальный эффект. Я думаю, что смогу избавиться от этого, установив конкретную высоту и ширину imgs при создании страницы в PHP. Тем не менее, я не знаю, какова будет их ширина дисплея (ширина #gallerycontainer и, следовательно, количество столбцов зависит от ширины окна браузера), поэтому я не могу установить эти значения явно.
Есть ли какая-нибудь хитрость CSS, чтобы каждая картинка была в правом столбце даже до ее загрузки?
ЗаметкиЯ хочу, чтобы это работало с как можно меньшим количеством Javascript, особенно без внешних фреймворков или пакетов, поэтому Masonry здесь не вариант. Кроме того, у меня есть работающее «мошенническое» решение (см. Ниже), я в основном ищу более эффективные способы решения этой проблемы и в то же время документирую свое решение на случай, если кто-то еще столкнется с такой же проблемой.
Решение
Моим первым подходом к решению этой проблемы было явное введение разрывов столбцов с помощью моего PHP-кода для поддержки настройки нескольких столбцов CSS. Поэтому я бы определил их положение в PHP и добавил бы следующий CSS:
.img {
-webkit-column-break-after: avoid;
break-after: avoid;
.columnbreak {
-webkit-column-break-after: always;
break-after: column;
}
Тем не менее, поддержка браузером для предотвращения разрыва страниц пока очень плохая. На самом деле я иногда заканчивал тем, что получал четвертый столбец в макете из трех столбцов, когда разрывы столбцов вручную не совпадали с автоматическими разрывами столбцов в Chrome, игнорируя avoid,
В итоге я использовал три CSS-позиционированных divs для моих трех столбцов, а PHP явно поместил их в эти три столбца. Это дает мне визуальный результат, который я хочу, но это похоже на неудовлетворительное «мошенническое» решение.
Вот мой CSS для этих столбцов:
.column {
position:absolute;
width:32.5%;
width:calc((100% - 16px)/3);
top:0;
left:0;
}
.column:nth-child(2) {
left:33.75%;
left:calc((100% - 16px)/3 + 8px);
}
.column:nth-child(3) {
left:67.5%;
left:calc((100% - 16px)*2/3 + 16px);
}
Если кто-то захочет использовать мое решение для своего проекта, вот мой PHP-код:
$totalheight=0;
while($pic=readdir($dir))
{
if(strtolower(substr($pic,-3))=="jpg")
{
$pics[]=$pic;
$size=getimagesize('galerie/'.$galerie.'/'.$pic);
$totalheight+=$size[1]/$size[0];
}
}
$columnheight=0;
$columnbreaks=0;
$piccontent.= "<div class='column'>";
foreach ( $pics as $pic )
{
$size=getimagesize('galerie/'.$galerie.'/'.$pic);
if($columnheight+$size[1]/$size[0]/2 >= $totalheight/3 && $columnbreaks<2) {
$piccontent.= "</div><div class='column'>"; //start a new column
$columnheight=0;
$columnbreaks++;
}
$columnheight+=$size[1]/$size[0];
$piccontent.='<div class="img"><img src="photos_tn/'.$galerie.'/'.$pic.'" alt=""></div>';
}
$piccontent.= "</div>";
Другие решения
Других решений пока нет …