pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

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

HTML5實現的圖片無限加載的瀑布流效果另帶邊框圓角陰影_html5教程技巧HTML5中文學習網,是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網站、HTML5資訊、HTML5應
點評:一款網頁瀑布流效果,可以實現圖片的無限制加載。基于時下流行的HTML5技術編寫而成,除了實現瀑布流,還加入了CSS5的圖片修飾效果,比如圖片的圓角邊框、圖片陰影立體效果等
又一款網頁瀑布流效果,可以實現圖片的無限制加載。基于時下流行的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 title = document.createElement('div');
title.className = 'title';
info.appendChild(title);
//創建a標記
var a = document.createElement('a');
a.innerHTML = data[i].title;
title.appendChild(a);
}
PBL('wrap','box');
}
}
}
/**
* 瀑布流主函數
* @param wrap [Str] 外層元素的ID
* @param box [Str] 每一個box的類名
*/
function PBL(wrap,box){
//1.獲得外層以及每一個box
var wrap = document.getElementById(wrap);
var boxs = getClass(wrap,box);
//2.獲得屏幕可顯示的列數
var boxW = boxs[0].offsetWidth;
var colsNum = Math.floor(document.documentElement.clientWidth/boxW);
wrap.style.width = boxW*colsNum+'px';//為外層賦值寬度
//3.循環出所有的box并按照瀑布流排列
var everyH = [];//定義一個數組存儲每一列的高度
for (var i = 0; i < boxs.length; i++) {
if(i<colsNum){
everyH[i] = boxs[i].offsetHeight;
}else{
var minH = Math.min.apply(null,everyH);//獲得最小的列的高度
var minIndex = getIndex(minH,everyH); //獲得最小列的索引
getStyle(boxs[i],minH,boxs[minIndex].offsetLeft,i);
everyH[minIndex] += boxs[i].offsetHeight;//更新最小列的高度
}
}
}
/**
* 獲取類元素
* @param warp [Obj] 外層
* @param className [Str] 類名
*/
function getClass(wrap,className){
var obj = wrap.getElementsByTagName('*');
var arr = [];
for(var i=0;i<obj.length;i++){
if(obj[i].className == className){
arr.push(obj[i]);
}
}
return arr;
}
/**
* 獲取最小列的索引
* @param minH [Num] 最小高度
* @param everyH [Arr] 所有列高度的數組
*/
function getIndex(minH,everyH){
for(index in everyH){
if (everyH[index] == minH ) return index;
}
}
/**
* 數據請求檢驗
*/
function getCheck(){
var documentH = document.documentElement.clientHeight;
var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
return documentH+scrollH>=getLastH() ?true:false;
}
/**
* 獲得最后一個box所在列的高度
*/
function getLastH(){
var wrap = document.getElementById('wrap');
var boxs = getClass(wrap,'box');
return boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight;
}
/**
* 設置加載樣式
* @param box [obj] 設置的Box
* @param top [Num] box的top值
* @param left [Num] box的left值
* @param index [Num] box的第幾個
*/
var getStartNum = 0;//設置請求加載的條數的位置
function getStyle(box,top,left,index){
if (getStartNum>=index) return;
$(box).css({
'position':'absolute',
'top':top,
"left":left,
"opacity":"0"
});
$(box).stop().animate({
"opacity":"1"
},999);
getStartNum = index;//更新請求數據的條數位置
}
</script>
</head>
<body>
<section id="title">
<h2>瀑布流效果的學習</h2>By Smile.
</section>
<div id="wrap">
<div class="box">
<div class="info">
<div class="pic"><img src="/jscss/demoimg/201312/1.jpg"></div>
<div class="title"><a href="#">圖片標題</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="/jscss/demoimg/201312/2.jpg"></div>
<div class="title"><a href="#">圖片標題</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="/jscss/demoimg/201312/3.jpg"></div>
<div class="title"><a href="#">圖片標題</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="/jscss/demoimg/201312/4.jpg"></div>
<div class="title"><a href="#">圖片標題</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="/jscss/demoimg/201312/5.jpg"></div>
<div class="title"><a href="#">圖片標題</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="/jscss/demoimg/201312/6.jpg"></div>
<div class="title"><a href="#">圖片標題</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="/jscss/demoimg/201312/7.jpg"></div>
<div class="title"><a href="#">圖片標題</a></div>
</div>
</div>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

主站蜘蛛池模板: 焊接减速机箱体,减速机箱体加工-淄博博山泽坤机械厂 | 合肥白癜风医院_合肥治疗白癜风医院_合肥看白癜风医院哪家好_合肥华研白癜风医院 | 耐高温硅酸铝板-硅酸铝棉保温施工|亿欧建设工程 | 有源电力滤波装置-电力有源滤波器-低压穿排电流互感器|安科瑞 | 学叉车培训|叉车证报名|叉车查询|叉车证怎么考-工程机械培训网 | 上海风淋室_上海风淋室厂家_上海风淋室价格_上海伯淋 | LED灯杆屏_LED广告机_户外LED广告机_智慧灯杆_智慧路灯-太龙智显科技(深圳)有限公司 | 水质传感器_水质监测站_雨量监测站_水文监测站-山东水境传感科技有限公司 | 广东高华家具-公寓床|学生宿舍双层铁床厂家【质保十年】 | 铝扣板-铝方通-铝格栅-铝条扣板-铝单板幕墙-佳得利吊顶天花厂家 elisa试剂盒价格-酶联免疫试剂盒-猪elisa试剂盒-上海恒远生物科技有限公司 | 小程序开发公司-小程序制作-微信小程序开发-小程序定制-咏熠软件 | 不干胶标签-不干胶贴纸-不干胶标签定制-不干胶标签印刷厂-弗雷曼纸业(苏州)有限公司 | 别墅图纸超市|别墅设计图纸|农村房屋设计图|农村自建房|别墅设计图纸及效果图大全 | 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 河南空气能热水器-洛阳空气能采暖-洛阳太阳能热水工程-洛阳润达高科空气能商行 | 【铜排折弯机,钢丝折弯成型机,汽车发泡钢丝折弯机,线材折弯机厂家,线材成型机,铁线折弯机】贝朗折弯机厂家_东莞市贝朗自动化设备有限公司 | 电动垃圾车,垃圾清运车-江苏速利达机车有限公司| 广西教师资格网-广西教师资格证考试网 | 通信天线厂家_室分八木天线_对数周期天线_天线加工厂_林创天线源头厂家 | 浙江美尔凯特智能厨卫股份有限公司| 深圳希玛林顺潮眼科医院(官网)│深圳眼科医院│医保定点│香港希玛林顺潮眼科中心连锁品牌 | 精准猎取科技资讯,高效阅读科技新闻_科技猎 | 消泡剂-水处理消泡剂-涂料消泡剂-切削液消泡剂价格-东莞德丰消泡剂厂家 | 低噪声电流前置放大器-SR570电流前置放大器-深圳市嘉士达精密仪器有限公司 | 浇钢砖,流钢砖_厂家价低-淄博恒森耐火材料有限公司 | 酒店品牌设计-酒店vi设计-酒店标识设计【国际级】VI策划公司 | 深圳标识制作公司-标识标牌厂家-深圳广告标识制作-玟璟广告-深圳市玟璟广告有限公司 | 沈阳庭院景观设计_私家花园_别墅庭院设计_阳台楼顶花园设计施工公司-【沈阳现代时园艺景观工程有限公司】 | 除尘器布袋骨架,除尘器滤袋,除尘器骨架,电磁脉冲阀膜片,卸灰阀,螺旋输送机-泊头市天润环保机械设备有限公司 | 除甲醛公司-甲醛检测-广西雅居环境科技有限公司 | 蒸压釜_蒸养釜_蒸压釜厂家-山东鑫泰鑫智能装备有限公司 | 液压油缸生产厂家-山东液压站-济南捷兴液压机电设备有限公司 | 智能电表|预付费ic卡水电表|nb智能无线远传载波电表-福建百悦信息科技有限公司 | 外观设计_设备外观设计_外观设计公司_产品外观设计_机械设备外观设计_东莞工业设计公司-意品深蓝 | 护栏打桩机-打桩机厂家-恒新重工 | 乐泰胶水_loctite_乐泰胶_汉高乐泰授权(中国)总代理-鑫华良供应链 | 成都亚克力制品,PVC板,双色板雕刻加工,亚克力门牌,亚克力标牌,水晶字雕刻制作-零贰捌广告 | 不锈钢轴流风机,不锈钢电机-许昌光维防爆电机有限公司(原许昌光维特种电机技术有限公司) | 江苏齐宝进出口贸易有限公司| 高温热泵烘干机,高温烘干热泵,热水设备机组_正旭热泵 | 泰来华顿液氮罐,美国MVE液氮罐,自增压液氮罐,定制液氮生物容器,进口杜瓦瓶-上海京灿精密机械有限公司 |