作者danny0838 (道可道非常道)
看板Ajax
标题[问题] 仿 Google 相簿的图片拼贴排版
时间Tue Jul 12 01:08:19 2016
如题，想请教各位大神如何实做像 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://webptt.com/cn.aspx?n=bbs/Ajax/M.1468256903.A.77E.html
1F：推 ian90911: 可能是每张图都有自己的缩图图档? 07/12 13:18
4F：推 biobluesheep: 不就瀑布流？ 07/29 01:14