您的位置：首页 > Web前端 > CSS

利用css与html生成瀑布流图片展示

2017-08-30 12:59 459 查看

所谓瀑布流，就是想瀑布一样展示图片。不对图片经行处理让图片达到自动排版的效果。让图片展示变得美观。

不说废话了，上代码就行了。有需要的拿去用吧。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<style>
*{padding:0;margin:0;}
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main {
position: relative;
width: 800px;
-webkit-column-width: 210px;
-moz-column-width: 210px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
}
.box {
float: left;
padding: 15px 0 0 15px;
}
.box .pic {
width: 180px;
height: auto;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #cccccc;
border: 1px solid #cccccc;
}
.box .pic img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="main clearfix" id="main">
<div class="box">
<div class="pic"><img src="./img/04369d67112d59a9969d28a92eb1be8b.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/0976aa41413ad161d0925879f0f36a3a.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/43152615e05c73d0a7f89b96c99924c8.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/5a792370fd8a9ea607cc7d4d7d05cbe8.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/781e563624614213daea57beec7c0b18.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/514d263075da887b2279fc6c6e596d14.jpeg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/7f6497b2fb0ff6268fd0d41069f0efea.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/8551931e930a23edf63a5c08d0e4f79d.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/96d0aff5575bbd9edd934097c203171b.jpeg"></div>
</div>

<!--<div class="box">
<div class="pic"><img src="./img/9.jpg"></div>
</div>-->

<div class="box">
<div class="pic"><img src="./img/98238e1f2309dd4d51809e66efa69ef8.jpeg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/99caa7788eb19ff58a50c12f0f438116.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/a7b7f137ed3343dbc1a92ee34db390cf.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/a8780c2d0d7c3c22410e60010a1165d8.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/ab216fea7e3679f972a871684efba7f0.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/b5d95e0b9c65dba6219b05395682aef8.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/bbff05b2d2fb49cdd675c4e9c6558f0a.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/be0e6ec9438a77990c3c61c8a68363b4.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/bee1ec85acd8cc4451652f0c1c62e7fb.png"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/ccc48168eaf6aa8646373f9b22c935d5.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/e901b05d2613df70e9bbd56bcf618caa.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/f3349e2ca2c6b9c4c0e09df9a08f7181.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/image1.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/image2.jpg"></div>
</div>

<div class="box">
<div class="pic"><img src="./img/image3.jpeg"></div>
</div>
</div>
</body>
</html>

注意：

1.想看效果的，请把图片的src路径补全。

2.最外层的id=“main的宽度可以任意修改，也可以添加其他样式。

3.div的padding与border相关参数可任意修改

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航