css3实现的瀑布流布局代码实例
分类：实例代码
分享一段代码实例，它实现了瀑布流布局效果。
代码是完全静态的，这里只是演示，瀑布流布局是如何实现的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
padding: 0;
margin: 0;
}
#wrap {
position: relative;
margin: 0px auto;
-webkit-column-width: 250px;
}
#wrap li {
width: 250px;
display: inline-block;
list-style: none;
}
.boxCont {
position: relative;
margin: 15px;
border: 1px solid #ccc;
background: #eee;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
-webkit-border-radius: 60px / 5px;
-moz-border-radius: 60px / 5px;
border-radius: 60px / 5px;
-webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}
.boxCont:before {
content: '';
width: 50px;
height: 50px;
top: 0;
right: 0;
position: absolute;
display: inline-block;
z-index: -1;
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
}
.boxCont:after {
content: '';
width: 100px;
height: 100px;
top: 0;
left: 0;
position: absolute;
z-index: -1;
display: inline-block;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
-moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);
-o-transform: rotate(2deg) translate(20px,25px) skew(20deg);
transform: rotate(2deg) translate(20px,25px) skew(20deg);
}
</style>
</head>
<body>
<ul id="wrap">
<li>
<div class="boxCont" style="height:255px;"></div>
</li>
<li>
<div class="boxCont" style="height:306px;"></div>
</li>
<li>
<div class="boxCont" style="height:317px;"></div>
</li>
<li>
<div class="boxCont" style="height:388px;"></div>
</li>
<li>
<div class="boxCont" style="height:346px;"></div>
</li>
<li>
<div class="boxCont" style="height:272px;"></div>
</li>
<li>
<div class="boxCont" style="height:337px;"></div>
</li>
<li>
<div class="boxCont" style="height:257px;"></div>
</li>
<li>
<div class="boxCont" style="height:339px;"></div>
</li>
<li>
<div class="boxCont" style="height:306px;"></div>
</li>
<li>
<div class="boxCont" style="height:350px;"></div>
</li>
<li>
<div class="boxCont" style="height:239px;"></div>
</li>
<li>
<div class="boxCont" style="height:246px;"></div>
</li>
<li>
<div class="boxCont" style="height:270px;"></div>
</li>
<li>
<div class="boxCont" style="height:331px;"></div>
</li>
<li>
<div class="boxCont" style="height:270px;"></div>
</li>
<li>
<div class="boxCont" style="height:232px;"></div>
</li>
<li>
<div class="boxCont" style="height:284px;"></div>
</li>
<li>
<div class="boxCont" style="height:335px;"></div>
</li>
<li>
<div class="boxCont" style="height:245px;"></div>
</li>
<li>
<div class="boxCont" style="height:265px;"></div>
</li>
<li>
<div class="boxCont" style="height:354px;"></div>
</li>
<li>
<div class="boxCont" style="height:255px;"></div>
</li>
<li>
<div class="boxCont" style="height:362px;"></div>
</li>
<li>
<div class="boxCont" style="height:310px;"></div>
</li>
<li>
<div class="boxCont" style="height:272px;"></div>
</li>
<li>
<div class="boxCont" style="height:378px;"></div>
</li>
<li>
<div class="boxCont" style="height:221px;"></div>
</li>
<li>
<div class="boxCont" style="height:236px;"></div>
</li>
<li>
<div class="boxCont" style="height:373px;"></div>
</li>
</ul>
</body>
</html>
其实瀑布流布局非常的简单，就是让元素挨着排列，如果排不开就换行。
上面代码的核心是:
#wrap {
position: relative;
margin: 0px auto;
-webkit-column-width: 250px;
}
#wrap li {
width: 250px;
display: inline-block;
list-style: none;
}
更多内容可以参阅相关阅读:column-width可以参阅CSS3 column-width一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu