Html5（css3）的瀑布流布局的实现

浏览:3698次出处信息

有一段时间没有写文章了，之前的几篇瀑布流布局的文章得到一些朋友的关注。应该是受到淘宝UED的这篇（瀑布流布局浅析）博文的启发，发现好多朋友一直在寻找html5(css3)实现瀑布流布局的方法，故有此下文。

在开始这篇文字之前我先指出，做学问要严谨，比较准确的说，此文讲的并不是html5来实现的瀑布流效果，并且单纯的html也实现不了样式的表现，这里指的是css3的实现。而为什么我还要写成html5(css3)这样的标题呢，当然是引入流量了。你懂得！

css3中增加了一个新的属性：column，来实现等高的列的布局效果。该属性有column-width宽度，column-count数量等，并且能根据窗口自适应。更多内容自行百度吧，呵呵

在这里我开门见山的指出，下面的这种布局应该是成为css3的一种布局格式，姑且算作一种类瀑布流吧，但是此瀑布流非彼瀑布流。这种瀑布流的实现方法，用到了css3的column属性，个人之见：该属性比较适合用于一些文字性内容的布局上，而不是我们常见的瀑布流的小格子布局。为什么不适用，且听下面分解。首先看我一张图片说明

普通瀑布流布局与css3实现的效果对比图

上面的图片比较明了的指出了采用了普通的瀑布流布局与采用了column来表现的显示样式的对比。可以看到，普通的瀑布流布局样式是：横向平铺布局，向下推进的方式；css3的column实现的样式是：纵向展开，向右推进的形式。

所以得出结论：采用css3的column属性可以达成我们要求的显示效果，但是并不能达成我们期望得到的用户体验效果。

本来到此应该90%的结束了，但是本着诲人不倦的精神，我继续yy这种效果，看下面的demo效果（需要采用支持css3的浏览器查看）。

使用css3属性column实现的类瀑布流效果在线演示：

<!Doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>html5,css3,column效果</title>
<style>
*{padding:0;margin:0;}
#wrap{
position:relative;
margin:0px auto;
-webkit-column-width:250px;
-moz-cloumn-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;">
1
</div>
</li>
<li>
<div class="boxCont" style="height:306px;">
2
</div>
</li>
<li>
<div class="boxCont" style="height:317px;">
3
</div>
</li>
<li>
<div class="boxCont" style="height:388px;">
4
</div>
</li>
<li>
<div class="boxCont" style="height:346px;">
5
</div>
</li>
<li>
<div class="boxCont" style="height:272px;">
6
</div>
</li>
<li>
<div class="boxCont" style="height:337px;">
7
</div>
</li>
<li>
<div class="boxCont" style="height:257px;">
8
</div>
</li>
<li>
<div class="boxCont" style="height:339px;">
9
</div>
</li>
<li>
<div class="boxCont" style="height:306px;">
10
</div>
</li>
<li>
<div class="boxCont" style="height:350px;">
11
</div>
</li>
<li>
<div class="boxCont" style="height:239px;">
12
</div>
</li>
<li>
<div class="boxCont" style="height:246px;">
13
</div>
</li>
<li>
<div class="boxCont" style="height:270px;">
14
</div>
</li>
<li>
<div class="boxCont" style="height:331px;">
15
</div>
</li>
<li>
<div class="boxCont" style="height:270px;">
16
</div>
</li>
<li>
<div class="boxCont" style="height:232px;">
17
</div>
</li>
<li>
<div class="boxCont" style="height:284px;">
18
</div>
</li>
<li>
<div class="boxCont" style="height:335px;">
19
</div>
</li>
<li>
<div class="boxCont" style="height:245px;">
20
</div>
</li>
<li>
<div class="boxCont" style="height:265px;">
21
</div>
</li>
<li>
<div class="boxCont" style="height:354px;">
22
</div>
</li>
<li>
<div class="boxCont" style="height:255px;">
23
</div>
</li>
<li>
<div class="boxCont" style="height:362px;">
24
</div>
</li>
<li>
<div class="boxCont" style="height:310px;">
25
</div>
</li>
<li>
<div class="boxCont" style="height:272px;">
26
</div>
</li>
<li>
<div class="boxCont" style="height:378px;">
27
</div>
</li>
<li>
<div class="boxCont" style="height:221px;">
28
</div>
</li>
<li>
<div class="boxCont" style="height:236px;">
29
</div>
</li>
<li>
<div class="boxCont" style="height:373px;">
30
</div>
</li>
</ul>
<input type="button" id="more_btn" value="加载更多..."/>
<script type="text/javascript">
var $id = function(o){ return document.getElementById(o) || o};
$id("more_btn").onclick=function(){
for(i = 31; i < 60; i++) {
height = Math.floor(Math.random()*200 + 200);
$id("wrap").innerHTML += '<li><div class="boxCont" style="height:' + height + 'px;">'+i+'</div></li>';
};
}
</script>
</body>
</html>

上面是一个利用css3实现的类似瀑布流效果的案例，下面是主要代码部分：

#wrap{...-webkit-column-width:250px;...} //给外围元素指定column-width，关于column属性的使用方法，自行百度之

#wrap li{...display:inline-block;...}//为了使得每个模块不至于被截断，所以需要添加display:inline-block属性，可以删除此代码对比查看

运行代码后的效果大家可以看到这种类似瀑布流布局的效果了，但是不同的是瀑布流的布局是横向分布的，而采用column实现的效果是纵向分布的。另外关于每个小块的样式部分是采用了css3的一些简单效果，可以忽略。

点击“加载更多”的按钮来实现加载更多的效果，你会看到如果加载了更多的内容进来的话，页面新加载的内容并不是从下面载入的，而是挤到右边去了。

css3类瀑布流布局实现的总结：

最后整理以上方法的结论

该方法适合内容性的模块
该方法不是常见的瀑布流效果，是纵向排列的
该方法目前支持最新的google，firefox，opera，sarifi等浏览器

我考虑了N中纯css实现的方法，最后是以失败告终，所以，很无奈的说想要做瀑布流的话，还是乖乖的用js实现吧

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

Html5（css3）的瀑布流布局的实现