您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“HTML5怎么實(shí)現(xiàn)圖片無限加載的瀑布流效果”,感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“HTML5怎么實(shí)現(xiàn)圖片無限加載的瀑布流效果”吧!
代碼如下:
<!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"> /* 標(biāo)簽重定義 */ 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;} /* 定義關(guān)鍵幀 */ @-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(){ //運(yùn)行瀑布流主函數(shù) PBL('wrap','box'); //模擬數(shù)據(jù) var data = [{'src':'1.jpg','title':'圖片標(biāo)題'},{'src':'2.jpg','title':'圖片標(biāo)題'},{'src':'3.jpg','title':'圖片標(biāo)題'},{'src':'4.jpg','title':'圖片標(biāo)題'},{'src':'5.jpg','title':'圖片標(biāo)題'},{'src':'6.jpg','title':'圖片標(biāo)題'},{'src':'7.jpg','title':'圖片標(biāo)題'}]; //設(shè)置滾動(dòng)加載 window.onscroll = function(){ //校驗(yàn)數(shù)據(jù)請(qǐng)求 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標(biāo)記 var a = document.createElement('a'); a.innerHTML = data[i].title; title.appendChild(a); } PBL('wrap','box'); } } } /** * 瀑布流主函數(shù) * @param wrap [Str] 外層元素的ID * @param box [Str] 每一個(gè)box的類名 */ function PBL(wrap,box){ //1.獲得外層以及每一個(gè)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 = [];//定義一個(gè)數(shù)組存儲(chǔ)每一列的高度 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ù)請(qǐng)求檢驗(yàn) */ function getCheck(){ var documentH = document.documentElement.clientHeight; var scrollH = document.documentElement.scrollTop || document.body.scrollTop; return documentH+scrollH>=getLastH() ?true:false; } /** * 獲得最后一個(gè)box所在列的高度 */ function getLastH(){ var wrap = document.getElementById('wrap'); var boxs = getClass(wrap,'box'); return boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight; } /** * 設(shè)置加載樣式 * @param box [obj] 設(shè)置的Box * @param top [Num] box的top值 * @param left [Num] box的left值 * @param index [Num] box的第幾個(gè) */ var getStartNum = 0;//設(shè)置請(qǐng)求加載的條數(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;//更新請(qǐng)求數(shù)據(jù)的條數(shù)位置 } </script> </head> <body> <section id="title"> <h3>瀑布流效果的學(xué)習(xí)</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="#">圖片標(biāo)題</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="#">圖片標(biāo)題</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="#">圖片標(biāo)題</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="#">圖片標(biāo)題</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="#">圖片標(biāo)題</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="#">圖片標(biāo)題</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="#">圖片標(biāo)題</a></div> </div> </div> </div> <div > </div> </body> </html>
到此,相信大家對(duì)“HTML5怎么實(shí)現(xiàn)圖片無限加載的瀑布流效果”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。