PHP：不同寬度的動態圖像網格

Question

在我的網站上，我有多個圖像具有相同的高度，但有三個不同的寬度。我想在一個不錯的網格中顯示這些。上傳圖片時，我會檢查圖片是寬還是高。

我然後對圖像 S，M &升

S代表高圖像和米&升寬圖像三種不同的尺寸。

這些圖像顯示在一個小圖像佔據1個點，中等（m）佔據2個點，大（l）佔據3個點的表格中。每行有3個點。

如果我有可能8個圖像（4高和4寬），我希望它看起來像這樣（W =空白）：

sss 
ms 
l 
l 
l 

，而不是

sss 
sww 
l 
l 
l 
l 

這意味着前3張圖片只是小圖片。而且由於我需要第二排的中等圖像，我將其中一幅廣角圖像佔據2個點。然後在旁邊有一個高大的圖像，最後三行是三個寬的圖像，每行一個。

我希望我解釋得很好。

編輯：

還是讓我們說我有4張圖片2高，2寬（W =空白）：

這樣

ssw 
l 
l 

顯示它代替

我希望它看起來像這樣：

sm (or ms) 
sm (or ms) 

How我做這個工作？

Answer 1

有幾個這樣的庫，最簡單的是jQuery Masonry。

你可以用最少的代碼實現你想要的，因爲它只是可變的寬度而不是可變的寬度和高度，但也可以使用已經處理過的庫，而不是花時間自己。