이미지를 무제한으로 로드할 수 있는 또 다른 웹페이지 폭포 흐름 효과입니다. 데모 페이지에는 인기 있는 HTML5 기술을 기반으로 작성되었으며 시연의 편의를 위해 스크롤 막대가 스크롤됨에 따라 자동으로 주기적으로 표시되므로 누구나 쉽게 이해할 수 있습니다. 폭포 흐름. 폭포 흐름을 구현하는 것 외에도 그림의 둥근 모서리, 그림의 3차원 그림자 효과 등 CSS5 그림 수정 효과도 추가합니다. 폭포 흐름을 학습하기에 좋은 자료입니다. 코드 복사코드는 다음과 같습니다. <머리> jQuery无限加载瀑布流 <br>/* 标签중정义 */ <br>body{padding:0;margin:0; background:#ddd url(/jscss/demoimg/201312/bg55.jpg) 반복;} <br>img{border: 없음;} <br>a{text-장식:none;color:#444;} <br>a:hover{color:#999;} <br>#title{width:600px;margin:20px auto;text- align:center;} <br>/* 정义关键帧 */ <br>@-webkit-keyframes 음영{ <br>부터{opacity:1;} <br>15%{opacity:0.4;} <br>to {opacity:1;} <br>} <br>@-moz-keyframes 음영{ <br>부터{opacity:1;} <br>15%{opacity:0.4;} <br>to{opacity:1; } <br>} <br>@-ms-keyframes 음영{ <br>부터{opacity:1;} <br>15%{opacity:0.4;} <br>to{opacity:1;} <br>} <br>@-o-keyframes 음영{ <br>부터{opacity:1;} <br>15%{opacity:0.4;} <br>~{opacity:1;} <br>} <br>@keyframes 음영{ <br>부터{불투명도:1;} <br>15%{불투명도:0.4;} <br>~{불투명도:1;} <br>} <br>/* 랩 */ <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{너비:280px;높이:auto;border-radius:8px;box-shadow:0 0 11px #666;배경:#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>animation:shade 3s easy-in-out 1; <br>} <br>#wrap .box .info .pic img{너비:260px;border-radius:3px;} <br>#wrap .box .info .title{너비:260px;높이:40px;마진: 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' ,'제목':'图文标题'}]; <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(상자); <br>//创建info <br>var info = document.createElement('div'); <br>info.className = '정보'; <br>box.appendChild(정보); <br>//创建pic <br>var pic = document.createElement('div'); <br>pic.className = '사진'; <br>info.appendChild(그림); <br>//创建img <br>var img = document.createElement('img'); <br>img.src = '/jscss/demoimg/201312/' 데이터[i].src; <br>img.style.height = '자동'; <br>pic.appendChild(img); <br>//创建title <br>var title = document.createElement('div'); <br>title.className = '제목'; <br>info.appendChild(제목); <br>//创建a标记 <br>var a = document.createElement('a'); <br>a.innerHTML = 데이터[i].제목; <br>title.appendChild(a); <br>} <br>PBL('포장','상자'); <br>} <br>} <br>} <br>/**<br>* 폭포 흐름의 주요 기능 <br>* @param Wrap [Str] 외부 요소의 ID <br>* @param box [Str] 각 상자의 클래스 이름 <br>*/ <br>함수 PBL(wrap,box){ <br>//1.获得外层以及每一个box <br>var Wrap = document.getElementById(wrap); <br>var boxs = getClass(wrap,box); <br>//2.获得屏幕可显示的列数 <br>var boxW = boxs[0].offsetWidth; <br>var colsNum = Math.floor(document.documentElement.clientWidth/boxW); for (var i = 0; i 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 />* 가장 작은 열의 인덱스 가져오기 <br />* @param minH [Num] 최소 높이 <br />* @param EveryH [Arr] 모든 열 높이의 배열 <br />*/ <br />function getIndex(minH,everyH){ <br />for(index in EveryH){ <br />if (everyH[index] == minH ) return 색인; <br />} <br />} <br />/**<br />* 데이터 요청 확인 <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>* 마지막 상자가 위치한 열의 높이를 가져옵니다 <br>*/ <br>function getLastH(){ <br>var Wrap = document.getElementById('wrap'); <br>var boxs = getClass(wrap,'box'); <br>반환 상자[boxs.length-1].offsetTop 상자[boxs.length-1].offsetHeight; <br>} <br>/**<br>* 로딩 스타일 설정 <br>* @param box [obj] 상자 설정 <br>* @param top [Num] 상자의 상위 값 <br>* @param left [Num] 왼쪽 값 상자 개수 <br>* @param index [Num] 상자 개수<br>*/ <br>var getStartNum = 0;//设置请求加载적条数的位置 <br>function getStyle(box,top,left,index){ <br>if (getStartNum>=index) return; <br>$(box).css({ <br>'위치':'절대', <br>'top':top, <br>"왼쪽":왼쪽, <br>"불투명도":"0" <br>}); <br>$(box).stop().animate({ <br>"불투명도":"1" <br>},999); <br>getStartNum = index;//更新请求数据的条数位置 <br>} <br> <본문> <섹션 id="제목"> 瀑布流效果的school习By Smile. 图文标题 图文标题 图文标题 图文标题 图文标题 图文标题 图文标题