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

Question

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

Answer 1

flex布局

<div>

    <img/>

    <img/>

    <img/>

    <img/>

<div>

div{            

        display: flex;/*显示模式设置为弹性盒子*/

        flex-wrap: wrap;/*进行强制换行*/

    }        

    div:after{            

        /*对最后一个伪元素进行最大限度伸缩*/            

        content: ' ';            

        flex-grow: 999999999999999999999999999999999999;        

    }        

    img{             

        height: 200px;/*高度*/            

        width: auto;            

        margin: 2px;            

        flex-grow: 1;/*进行按比例伸缩*/            

        object-fit: cover;/*进行裁切，并且图片按比例缩放*/        

    }