HTML5怎樣實現(xiàn)圖片無限加載瀑布流效果
這篇文章主要介紹了HTML5怎樣實現(xiàn)圖片無限加載瀑布流效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)建站主營科爾沁右翼中網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,成都app軟件開發(fā),科爾沁右翼中h5小程序定制開發(fā)搭建,科爾沁右翼中網(wǎng)站營銷推廣歡迎科爾沁右翼中等地區(qū)企業(yè)咨詢
代碼如下:
<!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(){
//運行瀑布流主函數(shù)
PBL('wrap','box');
//模擬數(shù)據(jù)
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(){
//校驗數(shù)據(jù)請求
if(getCheck()){
var wrap = document.getElementById('wrap');
for(i in data){
//創(chuàng)建box
var box = document.createElement('div');
box.className = 'box';
wrap.appendChild(box);
//創(chuàng)建info
var info = document.createElement('div');
info.className = 'info';
box.appendChild(info);
//創(chuàng)建pic
var pic = document.createElement('div');
pic.className = 'pic';
info.appendChild(pic);
//創(chuàng)建img
var img = document.createElement('img');
img.src = '/jscss/demoimg/201312/'+data[i].src;
img.style.height = 'auto';
pic.appendChild(img);
//創(chuàng)建title
var title = document.createElement('div');
title.className = 'title';
info.appendChild(title);
//創(chuàng)建a標記
var a = document.createElement('a');
a.innerHTML = data[i].title;
title.appendChild(a);
}
PBL('wrap','box');
}
}
}
/**
* 瀑布流主函數(shù)
* @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.獲得屏幕可顯示的列數(shù)
var boxW = boxs[0].offsetWidth;
var colsNum = Math.floor(document.documentElement.clientWidth/boxW);
wrap.style.width = boxW*colsNum+'px';//為外層賦值寬度
//3.循環(huán)出所有的box并按照瀑布流排列
var everyH = [];//定義一個數(shù)組存儲每一列的高度
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] 所有列高度的數(shù)組
*/
function getIndex(minH,everyH){
for(index in everyH){
if (everyH[index] == minH ) return index;
}
}
/**
* 數(shù)據(jù)請求檢驗
*/
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;//設置請求加載的條數(shù)的位置
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;//更新請求數(shù)據(jù)的條數(shù)位置
}
</script>
</head>
<body>
<section id="title">
<h3>瀑布流效果的學習</h3>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 >
</div>
</body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML5怎樣實現(xiàn)圖片無限加載瀑布流效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!
本文名稱：HTML5怎樣實現(xiàn)圖片無限加載瀑布流效果
瀏覽地址：http://sd-ha.com/article22/jiigcc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、全網(wǎng)營銷推廣、服務器托管、Google、動態(tài)網(wǎng)站、網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 我的網(wǎng)站適合虛擬主機嗎？ 2022-07-27
- 如何區(qū)分云虛擬主機和云服務器 2021-02-13
- 選擇免費虛擬主機要謹慎 2021-02-26
- 網(wǎng)站服務器或虛擬主機什么要放在IDC機房中？ 2022-04-30
- 云主機和云虛擬主機有什么區(qū)別？ 2021-02-15
- 虛擬主機被惡意攻擊怎么辦 2016-09-19
- 購買一個虛擬主機需要注意什么 2022-10-08
- 哪些類型的網(wǎng)站不適合使用虛擬主機？ 2021-03-04
- 給專業(yè)的公司還是個人做網(wǎng)站？ 2015-10-14
- 怎么計算網(wǎng)站需要多少虛擬主機空間 2022-10-06
- 要買虛擬主機有什么原因？虛擬主機空間有什么用？ 2021-02-19
- 成都網(wǎng)站制作需要什么虛擬主機？ 2016-11-16