Многоколоночная фотогалерея

Question

У меня есть фотогалерея с фотографией, которая должна отображать фотографии в трехколоночном макете. Каждое изображение будет иметь одинаковую ширину (т. Е. Ширину столбца), но поскольку соотношение сторон изменяется, равно как и его высота. Изображения находятся в полуслучайном порядке, поэтому порядок отображения (заполнение строк или столбцов) не имеет значения.

Я попытался установить это как макет 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 изменяется после каждой загрузки изображения, и поэтому изображения часто перераспределяются между столбцами, вызывая раздражающее Визуальный эффект. Я думаю, что я смогу избавиться от этого, установив конкретную высоту и ширину img s при создании страницы на PHP. Однако я не знаю, какова будет их ширина отображения (ширина #gallerycontainer и, следовательно, столбцов зависит от ширины окна браузера), поэтому я не могу явно установить эти значения.

Есть ли какой-либо CSS-трюк, чтобы иметь каждое изображение в правом столбце еще до его загрузки?

Примечания: Я хочу, чтобы это работало с минимальным Javascript, насколько это возможно, и особенно без внешних фреймворков или наборов, поэтому масонство здесь не вариант. Кроме того, у меня есть рабочее «мошенничество» (см. Ниже), я в основном ищут лучшие способы решения этой проблемы и в то же время документирую свое решение, если у кого-то другая проблема.

Answer 1

Мой первый подход к решению этого вопроса заключался в том, чтобы явно ввести разрывы столбцов с помощью кода PHP для поддержки многоколоночной настройки CSS. Поэтому я хотел бы определить положение этих в PHP и добавьте следующий CSS:

.img { 
    -webkit-column-break-after: avoid; 
    break-after: avoid; 
.columnbreak { 
    -webkit-column-break-after: always; 
    break-after: column; 
} 

Однако поддержка браузера для избежания pagebreaks очень плохо до сих пор. На самом деле я иногда получал четвертую колонку в моем трехколоночном макете, когда разрывы столбцов вручную не совпадали с автоматическими разрывами столбцов 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>";