多列圖片庫

Question

我有一個php供電的照片庫，應該以三列布局顯示圖片。每幅圖片將具有相同的寬度（即列寬），但是由於高寬比變化，所以它的高度也不同。圖片以半隨機順序排列，因此顯示順序（填充行或列）無關緊要。

我試圖設置此爲CS​​S佈局多列：

#gallerycontainer { 
    -webkit-column-count: 3; 
    -webkit-column-gap: 8px; 
    -moz-column-count: 3; 
    -moz-column-gap: 8px; 
    column-count: 3; 
    column-gap: 8px; 
} 

當一切都被加載，這個比賽我想才達到的。問題在於加載階段：一個圖像在另一個圖像之後被加載並因此改變到其正確的高度，在每個圖像加載之後內容的總高度改變，並且因此圖像在列​​之間重新分佈很多，產生惱人的視覺效果。我想我可以通過在PHP中生成頁面時設置img的特定高度和寬度來擺脫此問題。但是，我不知道它們的顯示寬度是多少（寬度爲#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>";