Der Wasserfall-Flow-Effekt des unendlichen Ladens von Bildern, implementiert durch HTML5 mit Rahmen- und abgerundeten Schatten_html5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Ein weiterer Wasserfall-Flow-Effekt für Webseiten, mit dem ein unbegrenztes Laden von Bildern erreicht werden kann. Es basiert auf der beliebten HTML5-Technologie. Zur Vereinfachung der Demonstration werden diese beim Scrollen der Bildlaufleiste automatisch in Zyklen angezeigt, sodass jeder die Wirkung klar verstehen kann Wasserfallfluss. Neben der Realisierung des Wasserfallflusses werden auch CSS5-Bildmodifikationseffekte hinzugefügt, z. B. abgerundete Ecken von Bildern, dreidimensionale Schatteneffekte von Bildern usw. Es ist ein gutes Material zum Erlernen des Wasserfallflusses.

Code kopieren Der Code lautet wie folgt: jQuery无限加载瀑布流 /* 标签重定义 */ body{padding:0;margin:0;background:#ddd url(/jscss/demoimg/201312/bg55.jpg) répéter;} 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{ de{opacity:1;} 15%{opacity:0.4;} à {opacity:1;} } @-moz-keyframes shade{ de{opacity:1;} 15 %{opacity:0.4;} à{opacity:1; } } @-ms-keyframes shade{ de{opacity:1;} 15 %{opacity:0.4;} à{opacity:1;} } @-o-keyframes shade{ de{opacity:1;} 15 %{opacity:0.4;} à{opacity:1;} } @keyframes ombre{ de{opacity:1;} 15 %{opacity:0.4;} à{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 facilité d'entrée 1 ; -ms-animation:shade 3s facilité d'entrée 1 ; -o-animation:shade 3s facilité d'entrée 1 ; animation : ombre 3, entrée et sortie faciles 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 = 'boîte'; wrap.appendChild(box); //创建info var info = document.createElement('div'); info.className = 'info'; box.appendChild(infos); //创建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 = 'titre'; info.appendChild(titre); //创建a标记 var a = document.createElement('a'); a.innerHTML = data[i].title; titre.appendChild(a); } PBL('wrap','box'); } } } /** * Fonction principale du flux en cascade * @param wrap [Str] ID de l'élément extérieur * @param box [Str] Nom de classe de chaque boîte */ 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'; // /定义一个数组存储每一列的高度 for (var i = 0; i if(i everyH[i] = boxs[i ].offsetHauteur; }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;//更新最小列的高度 } } } /** * Récupère l'élément de classe * @param warp [Obj] couche externe * @param className [Str] nom de classe */ 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; } } } } 回傳arr; } } } /** * 取得最小列的索引 * @param minH [Num] 最小高度 * @param everyH [Arr] 所有列高度的陣列 */ function getIndex(minH,everyH){ for(index in everyH){ if (everyH[index] == minH ) return指數; } } /** * 資料請求檢定 */ function getCheck(){ var documentH = document.documentElement.clientHeight; varscrollH = document.documentElement.clientHeight; varscrollH = document.documentElement.TrollTop || .scrollTop; 回傳documentHscrollH>=getLastH() ?true:false; } /** * 取得最後一個box所在列的高度 */ function getLastH(){ var wrapgetm. ('wrap'); var boxs = getClass(wrap,'box'); 返回盒子[boxs.length-1].offsetTop 盒子[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({ '位置':'絕對', '頂部':頂部, "左":左, "不透明度":"0" }); $(box).stop().animate({ "opacity":"1" },999); getStartNum = index;//更新請求資料的條數位置 } ; 頭>

瀑布流效果的學習 作者：Smile。 節> 圖片標題 圖片標題 圖片標題 div> 圖片標題 圖片標題

圖片標題 圖片標題 身體>