Kesan aliran air terjun daripada pemuatan imej tanpa had yang dilaksanakan oleh HTML5 dengan kemahiran tutorial jidar dan shadow_html5 bulat

Satu lagi kesan aliran air terjun halaman web yang boleh mencapai pemuatan imej tanpa had. Ia ditulis berdasarkan teknologi HTML5 yang popular Sebanyak 7 gambar digunakan dalam halaman demo Untuk kemudahan demonstrasi, ia secara automatik dipaparkan dalam kitaran sebagai skrol bar, supaya semua orang dapat memahami dengan jelas kesannya. aliran air terjun. Di samping merealisasikan aliran air terjun, ia juga menambah kesan pengubahsuaian gambar CSS5, seperti sudut bulat gambar, kesan bayangan tiga dimensi gambar, dll. Ia adalah bahan yang baik untuk mempelajari aliran air terjun.

Salin kod Kod tersebut adalah seperti berikut: jQuery无限加载瀑布流 /* 标签重定义 */ body{padding:0;margin:0;background:#ddd url(/jscss/demoimg/201312/bg55.jpg) repeat;} img{border: keine;} a{text-decoration:none;color:#444;} a:hover{color:#999;} #title{width:600px;margin:20px auto;text- align:center;} /* 定义关键帧 */ @-webkit-keyframes Shade{ von{opacity:1;} 15%{opacity:0.4;} bis {opacity:1;} } @-moz-keyframes Shade{ von{opacity:1;} 15 %{opacity:0.4;} bis{opacity:1; } } @-ms-keyframes Shade{ von{opacity:1;} 15 %{opacity:0.4;} bis{opacity:1;} } @-o-keyframes schattieren{ von{opacity:1;} 15 %{opacity:0.4;} bis{opacity:1;} } @keyframes Farbton{ von{opacity:1;} 15 %{opacity:0.4;} bis{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; Animation:Shade 3s Easy-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;} 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'); } } } /** * Hauptfunktion des Wasserfallflusses * @param wrap [Str] ID des äußeren Elements * @param box [Str] Klassenname jeder 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 if(i 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;//更新最小列的高度 } } } /** * Holen Sie sich das Klassenelement * @param warp [Obj] äußere Schicht * @param className [Str] Klassenname */ 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> 圖片標題 圖片標題

圖片標題 圖片標題 身體>