水平瀑布流之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;/*进行裁切,并且图片按比例缩放*/ }
效果: