css3实现瀑布流布局
2019-11-23 本文已影响0人
骑代码奔小康
感谢慕课网的老师，在慕课上又学了一个轮子，加深印象同时也方便以后使用，把它记下来，用css中的column多列布局实现一个瀑布流的效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS3实现的瀑布流</title>
</head>
<style type="text/css">
.container{
/* 这个是列宽度*/
/*-webkit-column-width:25%;
-moz-column-width: 25%;
column-width: 25%; */
text-align: center;
-webkit-column-count: 2; /* 有多少列*/
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 0px; /* 列间距 默认是16px */
-moz-column-gap: 0px;
column-gap: 0px;
/*-webkit-column-gap:5px;
-moz-column-gap:5px;*/
}
/*数据块 砖块*/
.container div{
width: 100%;
height: 100%;
}
.container img{
width: 100%;
height: 100%;
}
</style>
<body style="margin: 0px; padding: 0px;">
<div class="container">
<div><img src="images/P_00.jpg" /></div>
<div><img src="images/P_01.jpg" /></div>
<div><img src="images/P_02.jpg" /></div>
<div><img src="images/P_03.jpg" /></div>
<div><img src="images/P_04.jpg" /></div>
<div><img src="images/P_05.jpg" /></div>
<div><img src="images/P_06.jpg" /></div>
<div><img src="images/P_07.jpg" /></div>
<div><img src="images/P_08.jpg" /></div>
<div><img src="images/P_09.jpg" /></div>
<div><img src="images/P_010.jpg" /></div>
<div><img src="images/P_011.jpg" /></div>
<div><img src="images/P_012.jpg" /></div>
<div><img src="images/P_013.jpg" /></div>
<div><img src="images/P_014.jpg" /></div>
<div><img src="images/P_015.jpg" /></div>
<div><img src="images/P_016.jpg" /></div>
<div><img src="images/P_017.jpg" /></div>
<div><img src="images/P_018.jpg" /></div>
<div><img src="images/P_019.jpg" /></div>
<div><img src="images/P_05.jpg" /></div>
<div><img src="images/P_06.jpg" /></div>
<div><img src="images/P_07.jpg" /></div>
<div><img src="images/P_08.jpg" /></div>
<div><img src="images/P_09.jpg" /></div>
<div><img src="images/P_010.jpg" /></div>
<div><img src="images/P_011.jpg" /></div>
<div><img src="images/P_012.jpg" /></div>
<div><img src="images/P_013.jpg" /></div>
<div><img src="images/P_05.jpg" /></div>
<div><img src="images/P_06.jpg" /></div>
<div><img src="images/P_07.jpg" /></div>
<div><img src="images/P_08.jpg" /></div>
<div><img src="images/P_09.jpg" /></div>
<div><img src="images/P_010.jpg" /></div>
<div><img src="images/P_011.jpg" /></div>
<div><img src="images/P_012.jpg" /></div>
<div><img src="images/P_013.jpg" /></div>
<div><img src="images/P_03.jpg" /></div>
<div><img src="images/P_04.jpg" /></div>
<div><img src="images/P_05.jpg" /></div>
<div><img src="images/P_06.jpg" /></div>
<div><img src="images/P_07.jpg" /></div>
<div><img src="images/P_08.jpg" /></div>
<div><img src="images/P_09.jpg" /></div>
</div>
</body>
</html>
最后实现的效果是这样的，后面怎么去调都OK
image.png
