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

看板Ajax作者 (道可道非常道)時間8年前 (2016/07/12 01:08), 編輯推噓2(202)
留言4則, 3人參與, 最新討論串1/1
如題,想請教各位大神如何實做像 Google 相簿那樣的排版功能。 範例如下: http://imgur.com/kOgp6aE
可看到每列中的每張圖片高度都相同, 且無論圖片順序、大小如何,每列都能剛好左右對齊, 而且圖片與圖片之間的間距固定,不會忽寬忽窄。 目前初步實做出用 inline-block 及 max-width 排版的動態相簿: http://imgur.com/4Dwg0yK
原始碼及包好的bookmarklet如下: https://gist.github.com/danny0838/ddddad85ec24627397f3c5098fbac142 但就沒辦法像 Google 相簿那樣每列都能剛好左右對齊。 我想這是因為 Google 相簿會自動根據每列圖片佔用的空間動態等比例縮放圖片, 所以每列的圖片高度有些微差異(但同列一定相同), 不曉得這樣的效果是否有簡單的 CSS 或 JS 語法可達成, 或是一定要自己實做動態運算? 如果要動態運算,該怎麼算呢? -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.243.224.251 ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1468256903.A.77E.html

07/12 13:18, , 1F
可能是每張圖都有自己的縮圖圖檔?
07/12 13:18, 1F

07/15 21:48, , 2F
07/15 21:48, 2F

07/15 21:49, , 3F
07/15 21:49, 3F

07/29 01:14, , 4F
不就瀑布流?
07/29 01:14, 4F
文章代碼(AID): #1NWzA7T- (Ajax)
文章代碼(AID): #1NWzA7T- (Ajax)