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; } }
