目前位置
瀑布流效果Demo總結(1)之CSS3實現
作者:sLoB    發佈於:    文字:【】【】【

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>
<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>
</body>
</html>
瀏覽 (865) | 評論 (0) | 評分(0) | 支持(0) | 反對(0) | 發佈人:sLoB
將本文加入收藏夾
Search
美人時計
文章評論
最新評論
更多評論 發表評論
發表評論
您的評價
差(1) 一般(2) 好(3) 很好(4) 非常好(5)
評論標題
評論內容
驗 證 碼
看不清?更換一張
匿名發表 

© 2011 slobgame.net   website templates by styleshout      Powered by Wayhunt WebSite System 1.5