У меня есть фотогалерея на базе 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
изменяется после каждой загрузки изображения, и поэтому изображения #gallerycontainer
перераспределяются между столбцами, создавая раздражающий визуальный эффект. Я думаю, что я смогу избавиться от этого, установив конкретную высоту и ширину img
при создании страницы на PHP. Однако я не знаю, какова будет их ширина отображения (ширина #gallerycontainer
и, следовательно, столбцов зависит от ширины окна браузера), поэтому я не могу явно установить эти значения.
Есть ли какой-либо CSS-трюк, чтобы иметь все изображения в правом столбце еще до его загрузки?
Примечания. Я хочу, чтобы это работало с минимальным Javascript как можно больше, и особенно без внешних фреймворков или наборов, поэтому масонство здесь не вариант. Кроме того, у меня есть рабочее "мошенничество" (см. Ниже), я в основном ищут лучшие способы решения этой проблемы и в то же время документирую свое решение, если у кого-то другая проблема.
Мой первый подход к решению этого вопроса заключался в том, чтобы явно ввести разрывы столбцов с помощью моего 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-позиционных div
для моих трех столбцов и 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>";