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

Question

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

0

У меня есть фотогалерея на базе 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 как можно больше, и особенно без внешних фреймворков или наборов, поэтому масонство здесь не вариант. Кроме того, у меня есть рабочее "мошенничество" (см. Ниже), я в основном ищут лучшие способы решения этой проблемы и в то же время документирую свое решение, если у кого-то другая проблема.

Alex 11 янв. 2015, в 15:01

Источник

Теги:

php

css

multiple-columns

image-gallery

1 ответ

Ещё вопросы

Alex · Answer 1 · 2015-01-11T12-24-00.000Z

Мой первый подход к решению этого вопроса заключался в том, чтобы явно ввести разрывы столбцов с помощью моего 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>";