画像の無制限の読み込みを実現できるもう 1 つの Web ページのウォーターフォール フロー効果。デモ ページでは、デモの便宜上、スクロール バーのスクロールに合わせて合計 7 枚の画像が自動的に表示され、その効果を誰でも明確に理解できます。滝の流れ。滝の流れを実現するだけでなく、画像の角丸化や画像の立体的な影効果などCSS5による画像加工効果も追加されており、滝の流れを学ぶのに最適な教材です。 コードをコピーしますコードは次のとおりです: jQuery無制限追加ダウンロード瀑布流 <br>/* 标签重定义 */ <br>body{padding:0;margin:0;background:#ddd url(/jscss/demoimg/201312/bg55.jpg)repeat;} <br>img{border: none;} <br>a{text-decoration:none;color:#444;} <br>a:hover{color:#999;} <br>#title{width:600px;margin:20px auto;text- align:center;} <br>/* 定义关键帧 */ <br>@-webkit-keyframes shade{ <br>from{opacity:1;} <br>15%{opacity:0.4;} <br>to {opacity:1;} <br>} <br>@-moz-keyframes shade{ <br>from{opacity:1;} <br>15%{opacity:0.4;} <br>to{opacity:1; } <br>} <br>@-ms-keyframes shade{ <br>from{opacity:1;} <br>15%{opacity:0.4;} <br>to{opacity:1;} <br>} <br>@-o-keyframes shade{ <br>from{opacity:1;} <br>15%{opacity:0.4;} <br>to{opacity:1;} <br>} <br>@keyframes shade{ <br>from{opacity:1;} <br>15%{opacity:0.4;} <br>to{opacity:1;} <br>} <br>/* Wrap */ <br>#wrap {width:auto;height:auto;margin:0 auto;position:relative;} <br>#wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;} <br>#wrap .box .info{width:280px;height:auto;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;} <br>#wrap .box .info .pic{ width:260px;height:auto;margin:0 auto;padding-top:10px;} <br>#wrap .box .info .pic:hover{ <br>-webkit-animation:shade 3s easy-in-out 1 ; <br>-moz-animation:shade 3s easy-in-out 1; <br>-ms-animation:shade 3s easy-in-out 1; <br>-o-animation:shade 3s easy-in-out 1; <br>アニメーション:シェード 3s イーズインアウト 1; <br>} <br>#wrap .box .info .pic img{width:260px;border-radius:3px;} <br>#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;} <br> <br>window.onload = function(){ <br>//运行瀑布流主関数数 <br>PBL('wrap','box'); <br>//模拟数据 <br>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':'图片标题'}]; <br>//設置滚アニメーション追加 <br>window.onscroll = function(){ <br>//校验数据请要求 <br>if(getCheck()){ <br>var Wrap = document.getElementById('wrap '); <br>for(i in data){ <br>//创建box <br>var box = document.createElement('div'); <br>box.className = 'ボックス'; <br>wrap.appendChild(box); <br>//创建info <br>var info = document.createElement('div'); <br>info.className = '情報'; <br>box.appendChild(info); <br>//创建pic <br>var pic = document.createElement('div'); <br>pic.className = 'pic'; <br>info.appendChild(pic); <br>//创建img <br>var img = document.createElement('img'); <br>img.src = '/jscss/demoimg/201312/' data[i].src; <br>img.style.height = 'auto'; <br>pic.appendChild(img); <br>//创建タイトル <br>var title = document.createElement('div'); <br>title.className = 'タイトル'; <br>info.appendChild(タイトル); <br>//创建a标记 <br>var a = document.createElement('a'); <br>a.innerHTML = data[i].title; <br>title.appendChild(a); <br>} <br>PBL('ラップ','ボックス'); <br>} <br>} <br>} <br>/**<br>* ウォーターフォールフローのメイン関数 <br>* @param Wrap [Str] 外部要素の ID <br>* @param box [Str] 各ボックスのクラス名 <br>*/ <br>function PBL(wrap,box){ <br>//1.获得外层および每一个box <br>var ラップ = document.getElementById(wrap); <br>var box = getClass(wrap,box); <br>//2.画面表示可能な列数を取得します <br>var boxW = boxs[0].offsetWidth; <br>varcolsNum = Math.floor(document.documentElement.clientWidth/boxW); <br>wrap.style.width = boxW*colsNum 'px';//外層赋值宽度 <br>//3.循環出力すべてのボックス并按照瀑布流排列 <br>var eachH = [];/ /定数一列の高さ <br>for (var i = 0; i <boxs.length i></boxs.length>if(i<colsnum></colsnum>everyH[i] = boxs[i ].オフセット高さ; <br>}else{ <br>var minH = Math.min.apply(null,everyH);//最小列の高さを取得します <br>var minIndex = getIndex(minH,everyH); //最小列のインデックスを取得 <br>getStyle(boxs[i],minH,boxs[minIndex].offsetLeft,i); <br>everyH[minIndex] = boxs[i].offsetHeight;//最小列の高さを更新 <br>} <br>} <br>} <br>/**<br>* クラス要素を取得 <br>* @param warp [Obj] 外層 <br>* @param className [Str] クラス名 <br>*/ <br>function getClass(wrap,className){ <br>var obj = wrap.getElementsByTagName('*'); <br>var arr = []; <br>for(var i=0;i<obj.length;i ){ <br />if(obj[i].className == className){ <br />arr.push(obj[i]); <br />} <br />} <br />return arr; <br />} <br />/**<br />* Get the index of the smallest column <br />* @param minH [Num] Minimum height <br />* @param everyH [Arr] Array of all column heights <br />*/ <br />function getIndex(minH,everyH){ <br />for(index in everyH){ <br />if (everyH[index] == minH ) return index; <br />} <br />} <br />/**<br />* Data request verification <br />*/ <br />function getCheck(){ <br />var documentH = document.documentElement.clientHeight; <br />var scrollH = document.documentElement.scrollTop || document.body.scrollTop; <br />return documentH scrollH>=getLastH() ?true:false; <br>} <br>/**<br>* Get the height of the column where the last box is located <br>*/ <br>function getLastH(){ <br>var wrap = document.getElementById('wrap'); <br>var boxs = getClass(wrap,'box'); <br>return boxs[boxs.length-1].offsetTop boxs[boxs.length-1].offsetHeight; <br>} <br>/**<br>* Set the loading style <br>* @param box [obj] Set the Box <br>* @param top [Num] The top value of the box <br>* @param left [Num] The left value of the box <br>* @param index [Num] The number of the box<br>*/ <br>var getStartNum = 0;//设置请求加载的条数的位置 <br>function getStyle(box,top,left,index){ <br>if (getStartNum>=index) return; <br>$(box).css({ <br>'position':'absolute', <br>'top':top, <br>"left":left, <br>"opacity":"0" <br>}); <br>$(box).stop().animate({ <br>"opacity":"1" <br>},999); <br>getStartNum = index;//更新请求数据的条数位置 <br>} <br> 瀑布流效果的学习By Smile. 图片标题 图片标题 图片标题 图片标题 图片标题 图片标题 图片标题
