水平瀑布流之css实现

html：

    <div>
         <img src="./1.jpg" />
         <img src="./2.jpg" />
         <img src="./3.jpg" />
         <img src="./4.jpg" />
         <img src="./5.jpg" />
         <img src="./1.jpg" />
         <img src="./2.jpg" />
         <img src="./5.jpg" />
         <img src="./3.jpg" />
         <img src="./4.jpg" />
      </div>

css

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

　　效果：