使用column简单实现瀑布流效果
HTML：
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1>瀑布流效果</h1>
<ul class="Pic">
<li><div class="box"><img src="../imagess/ima1.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima2.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima3.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima4.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima5.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima6.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima7.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima8.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima9.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima10.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima1.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima2.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima3.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima4.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima5.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima6.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima7.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima8.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima9.jpg" alt=""></div></li>
<li><div class="box"><img src="../imagess/ima10.jpg" alt=""></div></li>
</ul>
</body>
</html>
---------------------------------------------分割线看什么看-------------------------------------------------------------
CSS：
*{
margin: 0;
padding: 0;
}
h1{
width: 100%;
height: 50px;
box-shadow: 0 2px 6px 0 #dddddd;
background-color: #fff;
line-height: 50px;
text-align: center;
position: fixed;
left: 0;
top: 0;
}
img{
width: 210px;
height: auto;
}
.Pic{
width: 100%;
list-style: none;
-moz-column-count:6;
-moz-column-gap:5px;
margin: 55px auto;
}
.Pic li{
margin: 0px 5px 5px;
}
.box{
padding: 5px;
width: 100%;
height: auto;
border: 1px solid #ccc;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 5px #ccc;
}
效果如图：
