简介：
百度图片相信大家都不会陌生，但是里面的布局实现效果确很麻烦。它是通过JS实现的，过程也相当麻烦。不要捉急，我们利用CSS来实现。实现原理就是通过CSS3的flex弹性布局来实现。今天咱们就来个高大上的视频讲解。
效果：
附图：百度图片
1480669517340166.png
附图：flex弹性布局效果图
1480669915957672.png
代码实现：
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>flex实现百度图片布局</title>
<style>
*{margin: 0; padding: 0; list-style: none; border: none;}
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="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.jpg" alt="" />
<img src="images/6.jpg" alt="" />
<img src="images/7.jpg" alt="" />
<img src="images/8.jpg" alt="" />
<img src="images/9.jpg" alt="" />
<img src="images/10.jpg" alt="" />
<img src="images/11.jpg" alt="" />
</div>
</body>
</html>
网友评论