提醒：本文最後更新於 2739 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

QuQuBlog 相簿中的圖片列表，之前是把圖片定高，容器定寬來排的。這樣實現起來簡單粗暴，但在圖片大小不一，尤其是橫豎圖片混排時，豎著的圖片兩側很空，不好看，還佔地方。

最近，用了一種新策略來改進圖片排列，效果大約是這樣：

在各種解析度下都是這樣的效果：

• 列表左右兩側對齊；
• 每個圖片容器邊距一致；
• 圖片定高，不壓縮不拉伸，儘可能保證原本高寬比例。

點頂部導航中的“相簿”或者點這裡可以看到實際效果（@update 2014.02.10，部落格改版，現在已經沒有相簿了），想知道具體策略繼續往下看。

每個圖片容器都是絕對定位，hidden掉overflow；圖片容器高度總等於圖片高度，寬度和位置是在頁面載入完和每次視窗resize時算出來的。計算的步驟如下：

1. 首先得到圖片列表容器寬度containerWidth；
2. 讓每個圖片容器的寬度等於自己圖片的寬度；
3. 迴圈圖片容器列表，把圖片容器分成若干行。確保每行寬度rowWidth大於或等於containerWidth（大部分情況是少一張寬度不夠，多一張寬度就超過了，所以rowWidth一般都大於containerWidth）；
4. 如果rowWidth大於containerWidth，根據圖片容器原始寬度在rowWidth所佔比例，把超過的部分平均分給每個容器。這樣每個容器寬度都減少了一些，列表右側就是對齊的；
5. 經過上一步，大部分圖片容器寬度都小於圖片寬度，給圖片負margin，保證居中顯示；
6. 根據圖片容器所在行數和順序設定容器top和left位置；
7. 最後根據圖片容器總行數設定列表容器高度containerHeight。

上面的策略用QWrap寫出來也就幾十行。由於圖片容器都是絕對定位，可以方便地加上動畫。最後，視窗resize時要delay一下再重新排，不然看起來有點奇怪，也影響效能。

--EOF--

發表於 2011-07-12 13:57:00 ，並被新增「 QWrap 、 QuQuBlog 」標籤 。檢視本文 Markdown 版本 »

提醒：本文最後更新於 2739 天前，文中所描述的資訊可能已發生改變，請謹慎使用。