[問題] 仿 Google 相簿的圖片拼貼排版

作者: danny0838 (道可道非常道)   2016-07-12 01:08:19
如題,想請教各位大神如何實做像 Google 相簿那樣的排版功能。
範例如下:
http://imgur.com/kOgp6aE
可看到每列中的每張圖片高度都相同,
且無論圖片順序、大小如何,每列都能剛好左右對齊,
而且圖片與圖片之間的間距固定,不會忽寬忽窄。
目前初步實做出用 inline-block 及 max-width 排版的動態相簿:
http://imgur.com/4Dwg0yK
原始碼及包好的bookmarklet如下:
https://gist.github.com/danny0838/ddddad85ec24627397f3c5098fbac142
但就沒辦法像 Google 相簿那樣每列都能剛好左右對齊。
我想這是因為 Google 相簿會自動根據每列圖片佔用的空間動態等比例縮放圖片,
所以每列的圖片高度有些微差異(但同列一定相同),
不曉得這樣的效果是否有簡單的 CSS 或 JS 語法可達成,
或是一定要自己實做動態運算?
如果要動態運算,該怎麼算呢?
作者: ian90911 (xopowo)   2016-07-12 13:18:00
可能是每張圖都有自己的縮圖圖檔?
作者: cf1064 (蚵仔)   2016-07-15 21:48:00
作者: biobluesheep (喉嚨痛)   2016-07-29 01:14:00
不就瀑布流?

Links booklink

Contact Us: admin [ a t ] ucptt.com