最初的想法
最近在折腾自己那个小破博客的首页，瞅着首页那堆图片展示区怎么看怎么别扭。以前傻呵呵地用了第三方图库插件，加载慢得像蜗牛爬不说，隔三差五出点兼容性毛病还得求爷爷告奶奶，实在受不了这鸟气。琢磨着干脆自己动手，搞个不依赖任何傻X脚本的图片瀑布流布局。
动手开搞
先把素材准备找了大概二十张尺寸乱七八糟的风景图，横的竖的啥都有，全扔进新建的images文件夹里。接着在网页里搭架子，写了个div当容器，class直接叫waterfall。然后给每张图套上标签按顺序塞进去。
关键来了，调CSS的时候心里犯嘀咕：光靠CSS行不行？不管了先试试。第一步把.waterfall 设成display: flex;，再用flex-wrap: wrap;让图片可以自动换行到下一行继续排。为了填满空白，又加了个align-content: flex-start;，好让每一行尽量顶到上面去。
难点就出在图片高度不一致上。盯着浏览器按F12反复调，发现得对.item下手，给个flex-grow: 1;让它们可以拉伸，宽度统一控制为min-width: 200px;，max-width: 100%;保证在小屏上也不乱跑。再把图片宽度设成100%，高度auto，总算看着图片自动缩放了。
试了下效果：
- 大屏桌面：一行能挤五六张图
- 平板竖着看：变三列
- 破手机：自动缩成一列
完美自适应，不用操心响应式。
踩坑日记
本来以为搞定了，结果老版本Edge突然抽风——图片全TM堆成竖直一列了！打开调试器一看，坑爹的flex-grow在某些浏览器里根本不理睬min-width。气得我直接掀键盘，上网狂搜解决方案，试了十几种方案。后来找到邪招：给每个.item里偷偷塞个::before伪元素，写上content: ''; flex-grow: 1000; width: 0;强行撑开。重启浏览器一刷，总算正常了。
意外收获
搞完这破玩意心血来潮，拿Chrome的Lighthouse跑分——好家伙！性能分从62飙到89！仔细琢磨才回过味，脚本全被干掉了，浏览器只需要吭哧吭哧排版HTMLCSS，当然跑得快。以前那个JS插件加载时还要卡顿半秒，现在直接秒开。
惨痛教训
做完跑去跟前端同事小王嘚瑟，结果被泼冷水：
- 这法子只适合图片高度差不太多的情况
- 图片数量一旦过百，布局计算照样卡爆
- 某些手机浏览器对::before的骚操作支持稀烂
小王这孙子说完还贱兮兮地甩过来他写的React组件库，气得我差点把他保温杯扔楼下。不过话说回来，要是不折腾这一遭，哪知道纯CSS能玩出这花样？下次谁再说CSS是雕花，老子就拿这一套糊他脸上！