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技巧可以在加载之前将右图中的每张图片都包含在内？

Notes ：我希望这可以使用尽可能少的Javascript，特别是没有外部框架或套件，所以Masonry不是一个选项。另外，我有一个工作＆＃34;作弊＆＃34;解决方案（见下文），我主要是寻找更好的解决方法，同时记录我的解决方案，以防其他人遇到同样的问题。

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明确地将它们放在这三列中。这给了我想要的视觉效果，但感觉就像是一种令人不满意的作弊＆＃34;溶液

以下是这些专栏的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>";

多列照片库

1 个答案: