百度图片横向瀑布流自适应
TIM截图20180703160601.png
参考大佬们的写法
https://segmentfault.com/q/1010000010556465
<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
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;/*进行裁切，并且图片按比例缩放*/
}
</style>
</head>
<body>
<div>
<img src="http://g.hiphotos.baidu.com/image/pic/item/0823dd54564e92584fbb491f9082d158cdbf4eb0.jpg" />
<img src="http://e.hiphotos.baidu.com/image/pic/item/500fd9f9d72a6059099ccd5a2334349b023bbae5.jpg" />
<img src="http://a.hiphotos.baidu.com/image/h%3D300/sign=47c7b6a58682b90122adc533438ca97e/4e4a20a4462309f7186930907e0e0cf3d7cad62a.jpg"/>
<img src="http://d.hiphotos.baidu.com/image/pic/item/7e3e6709c93d70cfb856af57f4dcd100baa12b3f.jpg"/>
<img src="http://g.hiphotos.baidu.com/image/pic/item/29381f30e924b899efa186c362061d950b7bf6a8.jpg" />
<img src="http://b.hiphotos.baidu.com/image/pic/item/a044ad345982b2b74939c63f3dadcbef77099ba3.jpg"/>
<img src="http://g.hiphotos.baidu.com/image/h%3D300/sign=758c8743f0039245beb5e70fb795a4a8/b8014a90f603738d1f357dacbf1bb051f919ecc5.jpg"/>
<img src="http://c.hiphotos.baidu.com/image/pic/item/cefc1e178a82b901e004bbc17f8da9773812ef93.jpg" />
<img src="http://h.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a29a2a71cae9225bc315c607c67.jpg"/>
<img src="http://f.hiphotos.baidu.com/image/pic/item/1ad5ad6eddc451dafc1f76e2bafd5266d11632c9.jpg"/>
<img src="http://g.hiphotos.baidu.com/image/pic/item/0823dd54564e92584fbb491f9082d158cdbf4eb0.jpg" />
<img src="http://e.hiphotos.baidu.com/image/pic/item/500fd9f9d72a6059099ccd5a2334349b023bbae5.jpg" />
<img src="http://a.hiphotos.baidu.com/image/h%3D300/sign=47c7b6a58682b90122adc533438ca97e/4e4a20a4462309f7186930907e0e0cf3d7cad62a.jpg"/>
<img src="http://d.hiphotos.baidu.com/image/pic/item/7e3e6709c93d70cfb856af57f4dcd100baa12b3f.jpg"/>
<img src="http://g.hiphotos.baidu.com/image/pic/item/29381f30e924b899efa186c362061d950b7bf6a8.jpg" />
<img src="http://b.hiphotos.baidu.com/image/pic/item/a044ad345982b2b74939c63f3dadcbef77099ba3.jpg"/>
<img src="http://g.hiphotos.baidu.com/image/h%3D300/sign=758c8743f0039245beb5e70fb795a4a8/b8014a90f603738d1f357dacbf1bb051f919ecc5.jpg"/>
<img src="http://c.hiphotos.baidu.com/image/pic/item/cefc1e178a82b901e004bbc17f8da9773812ef93.jpg" />
<img src="http://h.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a29a2a71cae9225bc315c607c67.jpg"/>
<img src="http://f.hiphotos.baidu.com/image/pic/item/1ad5ad6eddc451dafc1f76e2bafd5266d11632c9.jpg"/>
<div>
</body>
</html>
这里要注意flex-grow: 1;是等比分配剩余空间，img默认是有宽高的，所以宽度auto或者不设置都可以，但如果这里你用其他div去代替，一定注意设置宽度，且不能设置auto
网友评论