HTML5實現的圖片無限載入的瀑布流效果另帶邊框圓角陰影_html5教學技巧

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

複製程式碼 程式碼如下:

jQuery無制限追加ダウンロード瀑布流 /* 标签重定义 */ 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 easy-in-out 1 ; -moz-animation:shade 3s easy-in-out 1; -ms-animation:shade 3s easy-in-out 1; -o-animation:shade 3s easy-in-out 1; アニメーション:シェード 3s イーズインアウト 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;} 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 = 'ボックス'; wrap.appendChild(box); //创建info var info = document.createElement('div'); info.className = '情報'; 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); //创建タイトル var title = document.createElement('div'); title.className = 'タイトル'; info.appendChild(タイトル); //创建a标记 var a = document.createElement('a'); a.innerHTML = data[i].title; title.appendChild(a); } PBL('ラップ','ボックス'); } } } /** * ウォーターフォールフローのメイン関数 * @param Wrap [Str] 外部要素の ID * @param box [Str] 各ボックスのクラス名 */ function PBL(wrap,box){ //1.获得外层および每一个box var ラップ = document.getElementById(wrap); var box = getClass(wrap,box); //2.画面表示可能な列数を取得します var boxW = boxs[0].offsetWidth; varcolsNum = Math.floor(document.documentElement.clientWidth/boxW); wrap.style.width = boxW*colsNum 'px';//外層赋值宽度 //3.循環出力すべてのボックス并按照瀑布流排列 var eachH = [];/ /定数一列の高さ for (var i = 0; i if(i everyH[i] = boxs[i ].オフセット高さ; }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 if(obj[i].className == className){ arr.push(obj[i]); } } arr を返します。 } /** * 最小の列のインデックスを取得します * @param minH [Num] 最小の高さ * @param eachH [Arr] すべての列の高さの配列 */ function getIndex(minH,everyH){ for(index in eachH){ if (everyH[index] == minH ) return索引; } } /** * データリクエストの検証 */ function getCheck(){ var documentH = document.documentElement.clientHeight; varscrollH = document.documentElement.scrollTop || document.body.scrollTop; return documentHscrollH>=getLastH() ?true:false; } /** * 最後のボックスが配置されている列の高さを取得します */ 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] ボックスを設定します * @param top [Num] ボックスの上部の値 * @param left [Num] 左の値ボックスの * @param Index [Num] ボックスの番号 */ 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({ "不透明度":"1" },999); getStartNum =index;//更新要求データの条数位置 }

瀑布流效果的学习 笑顔で。 图片标题

图片标题

HTML5實現的圖片無限載入的瀑布流效果另帶邊框圓角陰影_html5教學技巧

瀑布流效果的学习

相關文章