HTML5實現的圖片無限加載的瀑布流效果另帶邊框圓角陰影

2024-08-26 00:17:25

字體：大中小

來源：轉載

供稿：網友

點評：一款網頁瀑布流效果，可以實現圖片的無限制加載?；跁r下流行的HTML5技術編寫而成，除了實現瀑布流，還加入了CSS5的圖片修飾效果，比如圖片的圓角邊框、圖片陰影立體效果等

又一款網頁瀑布流效果，可以實現圖片的無限制加載?；跁r下流行的HTML5技術編寫而成，演示頁面中一共調用了7張圖片，為了演示方便，這里讓其隨滾動條的滾動自動循環顯示，這樣大家更能清楚的看明白瀑布流的效果。除了實現瀑布流，還加入了CSS5的圖片修飾效果，比如圖片的圓角邊框、圖片陰影立體效果等，是學習瀑布流的好素材。

復制代碼

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery無限加載瀑布流</title>
<style type="text/css">
/* 標簽重定義 */
body{padding:0;margin:0;background:#ddd url(/jscss/demoimg/201312/bg55.jpg) repeat;}
img{border:none;}
a{text-decoration:none;color:#444;}
a:hover{color:#999;}
#title{width:600px;margin:20px auto;text-align:center;}
/* 定義關鍵幀 */
@-webkit-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@-moz-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@-ms-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@-o-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
/* wrap */
#wrap{width:auto;height:auto;margin:0 auto;position:relative;}
#wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;}
#wrap .box .info{width:280px;height:auto;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}
#wrap .box .info .pic{width:260px;height:auto;margin:0 auto;padding-top:10px;}
#wrap .box .info .pic:hover{
-webkit-animation:shade 3s ease-in-out 1;
-moz-animation:shade 3s ease-in-out 1;
-ms-animation:shade 3s ease-in-out 1;
-o-animation:shade 3s ease-in-out 1;
animation:shade 3s ease-in-out 1;
}
#wrap .box .info .pic img{width:260px;border-radius:3px;}
#wrap .box .info .title{width:260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:18px;font-weight:bold;overflow:hidden;}
</style>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
window.onload = function(){
//運行瀑布流主函數
PBL('wrap','box');
//模擬數據
var data = [{'src':'1.jpg','title':'圖片標題'},{'src':'2.jpg','title':'圖片標題'},{'src':'3.jpg','title':'圖片標題'},{'src':'4.jpg','title':'圖片標題'},{'src':'5.jpg','title':'圖片標題'},{'src':'6.jpg','title':'圖片標題'},{'src':'7.jpg','title':'圖片標題'}];
//設置滾動加載
window.onscroll = function(){
//校驗數據請求
if(getCheck()){
var wrap = document.getElementById('wrap');
for(i in data){
//創建box
var box = document.createElement('div');
box.className = 'box';
wrap.appendChild(box);
//創建info
var info = document.createElement('div');
info.className = 'info';
box.appendChild(info);
//創建pic
var pic = document.createElement('div');
pic.className = 'pic';
info.appendChild(pic);
//創建img
var img = document.createElement('img');
img.src = '/jscss/demoimg/201312/'+data[i].src;
img.style.height = 'auto';
pic.appendChild(img);
//創建title
var
});
$(box).stop().animate({
"opacity":"1"
},999);
getStartNum = index;//更新請求數據的條數位置
}
</script>
</head>
<body>
<section>
<h2>瀑布流效果的學習</h2>By Smile.
</section>
<div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/1.jpg"></div>
<div><a href="#">圖片標題</a></div>
</div>
</div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/2.jpg"></div>
<div><a href="#">圖片標題</a></div>
</div>
</div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/3.jpg"></div>
<div><a href="#">圖片標題</a></div>
</div>
</div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/4.jpg"></div>
<div><a href="#">圖片標題</a></div>
</div>
</div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/5.jpg"></div>
<div><a href="#">圖片標題</a></div>
</div>
</div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/6.jpg"></div>
<div><a href="#">圖片標題</a></div>
</div>
</div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/7.jpg"></div>
<div><a href="#">圖片標題</a></div>
</div>
</div>
</div>
<div>
</div>
</body>
</html>