瀑布流效果Demo總結（1）之CSS3實現
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>
網站選單
Search
好站推薦
美人時計
