百度图片的横向瀑布流是怎么实现的？

Question

前端瀑布流是老生常谈的话题，一般都是固定宽度，新内容不停地追加到最短列，但是百度图片的瀑布流就不这么简单了。百度图片是固定高度，每一行图片宽度不定，但是都能恰好排满，而且调整屏幕大小时，图片整体高度都会跟着变，每一行的图片个数也会跟着变，厉害了，我的百度，研究半天，没看出门道。

Answer 1

flex布局<div>&nbsp; &nbsp; <img/>&nbsp; &nbsp; <img/>&nbsp; &nbsp; <img/>&nbsp; &nbsp; <img/><div>div{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; display: flex;/*显示模式设置为弹性盒子*/&nbsp; &nbsp; &nbsp; &nbsp; flex-wrap: wrap;/*进行强制换行*/&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; div:after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; /*对最后一个伪元素进行最大限度伸缩*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; content: ' ';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; flex-grow: 999999999999999999999999999999999999;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; img{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; height: 200px;/*高度*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; width: auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; margin: 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; flex-grow: 1;/*进行按比例伸缩*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; object-fit: cover;/*进行裁切，并且图片按比例缩放*/&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }