php - 多栏照片库

Question

我有一个由 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 内容的总高度在每次图片加载后都会发生变化，因此图片会在两者之间重新分配列很多，产生烦人的视觉效果。我想我可以通过在用 PHP 生成页面时设置 img 的特定高度和宽度来摆脱这种情况。但是，我不知道它们的显示宽度是多少(#gallerycontainer 的宽度以及列的宽度取决于浏览器窗口的宽度)，所以我无法明确设置这些值。

是否有任何 CSS 技巧可以让每张图片在加载之前就位于右栏中？

注意:我希望它能与尽可能少的 Javascript 一起工作，尤其是在没有外部框架或套件的情况下，所以 Masonry 不是这里的一个选项。此外，我有一个有效的“作弊”解决方案(见下文)，我主要是在寻找更好的方法来解决这个问题，同时记录我的解决方案以防其他人遇到同样的问题。

Answer 1

我解决这个问题的第一个方法是通过我的 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>";