Google+ 相冊中的圖片自動無縫對齊是怎麼做到的？

如： https://plus.google.com/photos/100691313903096628184/albums/5712152542889757953
每行圖片的高度都是一致；每張圖片左右距離都是一致；每張圖片都是等比例縮放；最最重要的是，左右完全對齊一致。

---

說一下我的思路

要達到的要求是：

1. 圖片大小隨意
2. 圖片等比縮放，部分可以有裁切
3. 圖片間距相等（定值）
4. 每行高相等（不同行高度可不等），第一張圖片可以佔兩行
5. 圖片順序從左到右，從上到下，先後順序不變
6. 不必填充滿整個矩形

經過下面步驟可以達到類似 google 的效果

1. 把所有圖片等比縮放到相同高度
2. 以類似文字流的方式填充到容器內
3. 調節單行高度使左右對齊
4. 最後一行不調節高度

考慮第一張圖片佔兩行

1. 第一張圖片是定寬，右邊剩下的區域用上面提到的方法填充兩行
2. 根據調整完的兩行高度決定第一張圖片的高度，並裁切
3. 剩下的區域用上面提到的方法填充

用戶瀏覽器的窗口發生變化時需要重新計算布局，並重新請求圖片，可以把區域寬度傳給伺服器讓伺服器計算，並把結果返回；也可以伺服器把圖片的尺寸信息傳給該瀏覽器，瀏覽器計算布局，再向伺服器請求不同尺寸的圖片。

做了張示意圖，演示下計算布局的過程

---

高度並不都一致；橫向間距並不都一致；最最重要的是：圖片等比縮放但並非都沒有裁切。

---

先看動態演示：JS Bin
如果想知道實現方案，看我的這個回答
使用純 CSS 實現 500px 照片列表布局 - 謝然的文章 - 知乎專欄
純html5+css能寫出什麼驚人的效果？ - 謝然的回答

---

計算了一下，並非每個圖片都是等比例的。

---

推薦閱讀：