index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片瀑布流</title>
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<link href="picBegin.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- picBegin -->
<h1>图片瀑布流</h1>
<ul class="picC">
<li><img src="images/00.jpg" alt="" /></li>
<li><img src="images/01.jpg" alt="" /></li>
<li><img src="images/02.jpg" alt="" /></li>
<li><img src="images/03.jpg" alt="" /></li>
<li><img src="images/04.jpg" alt="" /></li>
<li><img src="images/05.jpg" alt="" /></li>
<li><img src="images/06.jpg" alt="" /></li>
<li><img src="images/07.jpg" alt="" /></li>
<li><img src="images/08.jpg" alt="" /></li>
<li><img src="images/09.jpg" alt="" /></li>
<li><img src="images/10.jpg" alt="" /></li>
<li><img src="images/11.jpg" alt="" /></li>
<li><img src="images/12.jpg" alt="" /></li>
<li><img src="images/13.jpg" alt="" /></li>
<li><img src="images/14.jpg" alt="" /></li>
<li><img src="images/15.jpg" alt="" /></li>
<li><img src="images/16.jpg" alt="" /></li>
<li><img src="images/17.jpg" alt="" /></li>
<li><img src="images/18.jpg" alt="" /></li>
<li><img src="images/19.jpg" alt="" /></li>
</ul>
</body>
</html>
picBegin.css
/*
移动优先原则,优先适应小屏幕
**/
img{
width:100%;
}
h1{
width:100%;
height:50px;
margin:0;
text-align:center;
line-height:50px;
background-color:#fff;
box-shadow:0 2px 6px 0 rgba(0,0,0,.5);
position:fixed;
left:0;
top:0;
}
.picC{
width:90%;
margin:50px auto;
-webkit-column-count:1;
-moz-column-count:1;
column-count:1;
-webkit-column-gap:10px;
-moz-column-gap:10px;
-column-gap:10px;
list-style:none;
-webkit-column-rule:1px solid dashed rgba(0,0,0,.5);
-moz-column-rule:1px dashed rgba(0,0,0,.5);
column-rule:1px dashed rgba(0,0,0,.5);
}
.picC li{
margin-top:10px;
}
@media (min-width:480px){
.picC{
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
}
}
@media (min-width:768px){
.picC{
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
-webkit-column-gap:20px;
-moz-column-gap:20px;
-column-gap:20px;
}
}