?
1.综述
??? 最近研究了时下流行的瀑布流展示效果。 当前共计尝试的方法及其优缺点如下：
（1）基于JQuery框架及blocksit.min.js实现的瀑布流不连续，每列中多多少少都会有一些位置出现空白。
（2）基于JQuery框架，用匿名函数形式，自编程实现瀑布流
（3）基于CSS3，chrome、火狐、搜狗浏览器显示正常，但IE8、IE10均不能显示瀑布流 只能显示单列照片，使用Web中介绍的ie-css3.htc或PIE插件仍不能在IE中显示瀑布流效果
?（4）基于DIV 用<script>实现的瀑布流，本地瀑布流测试效果正常
2.CSS3实现
??? CSS3的优点是实现简单，瀑布流效果已经包含在样式中，但IE对其不支持。
演示代码如下：??
? <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局Demo</title>
<style>
.container {
?-webkit-column-width:160px;
?-moz-column-width:160px;
?-o-colum-width:160px;
?-webkit-column-gap:1px;
?-moz-column-gap:1px;
?-o-column-gap:1px;
}
div:not(.container) {
?-webkit-border-radius:5px;
?-moz-border-radius:5px;
?border-radius:5px;
?background:#D9D9D9;
?border::#CCC 1px solid;
?display:inline-block;
?width:157px;
?position:relative;
?margin:2px;
}
</style>
</head>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局Demo</title>
<style>
.container {
?-webkit-column-width:160px;
?-moz-column-width:160px;
?-o-colum-width:160px;
?-webkit-column-gap:1px;
?-moz-column-gap:1px;
?-o-column-gap:1px;
}
div:not(.container) {
?-webkit-border-radius:5px;
?-moz-border-radius:5px;
?border-radius:5px;
?background:#D9D9D9;
?border::#CCC 1px solid;
?display:inline-block;
?width:157px;
?position:relative;
?margin:2px;
}
</style>
</head>
<body>
<div class="photocontainer"><img src="25b.jpg" onload="autoResize(this,160);"/><p>01</p></div>
??? <div class="photocontainer"><img src="df1260.jpg" onload="autoResize(this,160);"/><p>02</p></div>
??? <div class="photocontainer"><img src="462d10.jpg" onload="autoResize(this,160);"/><p>03</p></div>?
??</div>
<div class="photocontainer"><img src="25b.jpg" onload="autoResize(this,160);"/><p>01</p></div>
??? <div class="photocontainer"><img src="df1260.jpg" onload="autoResize(this,160);"/><p>02</p></div>
??? <div class="photocontainer"><img src="462d10.jpg" onload="autoResize(this,160);"/><p>03</p></div>?
??</div>
</body>
</html>
</html>
