CSS 实现类似 Google Photos 的图片布局
今天在 medium 看到一篇关于 Google Photos 的文章,里面详细的介绍了谷歌的一名工程师是如何设计 Google Photos 的布局的,文章地址:Building the Google Photos Web UI。
观察了一下 Google Photos 的布局,发现它的布局非常的有意思,有以下特点:
- 一行图片的宽度始终刚好占满容器宽度
- 图片全部保持原始比例,不会被拉伸
- 图片的高度不一,但是每一行的高度是一样的
- 图片顺序不会被改变
感觉很神奇,但是那篇文章里的实现方法太过复杂,虽然性能非常好,但是我觉得可以用更简单的方法来实现,于是就有了这篇文章。