테두리 및 둥근 Shadow_html5 튜토리얼 기술을 사용하여 HTML5로 구현된 이미지 무한 로딩의 폭포 흐름 효과-H5 튜토리얼-php.cn

이미지를 무제한으로 로드할 수 있는 또 다른 웹페이지 폭포 흐름 효과입니다. 데모 페이지에는 인기 있는 HTML5 기술을 기반으로 작성되었으며 시연의 편의를 위해 스크롤 막대가 스크롤됨에 따라 자동으로 주기적으로 표시되므로 누구나 쉽게 이해할 수 있습니다. 폭포 흐름. 폭포 흐름을 구현하는 것 외에도 그림의 둥근 모서리, 그림의 3차원 그림자 효과 등 CSS5 그림 수정 효과도 추가합니다. 폭포 흐름을 학습하기에 좋은 자료입니다.

코드 복사 코드는 다음과 같습니다. jQuery无限加载瀑布流 /* 标签중정义 */ body{padding:0;margin:0; background:#ddd url(/jscss/demoimg/201312/bg55.jpg) 반복;} img{border: 없음;} a{text-장식:none;color:#444;} a:hover{color:#999;} #title{width:600px;margin:20px auto;text- align:center;} /* 정义关键帧 */ @-webkit-keyframes 음영{ 부터{opacity:1;} 15%{opacity:0.4;} to {opacity:1;} } @-moz-keyframes 음영{ 부터{opacity:1;} 15%{opacity:0.4;} to{opacity:1; } } @-ms-keyframes 음영{ 부터{opacity:1;} 15%{opacity:0.4;} to{opacity:1;} } @-o-keyframes 음영{ 부터{opacity:1;} 15%{opacity:0.4;} ~{opacity:1;} } @keyframes 음영{ 부터{불투명도:1;} 15%{불투명도:0.4;} ~{불투명도:1;} } /* 랩 */ #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{너비:280px;높이:auto;border-radius:8px;box-shadow:0 0 11px #666;배경:#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{너비:260px;border-radius:3px;} #wrap .box .info .title{너비:260px;높이:40px;마진: 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' ,'제목':'图文标题'}]; //设置滚动加载 window.onscroll = function(){ //校验数据请求 if(getCheck()){ var Wrap = document.getElementById('wrap '); for(i in data){ //创建box var box = document.createElement('div'); box.className = '박스'; wrap.appendChild(상자); //创建info var info = document.createElement('div'); info.className = '정보'; box.appendChild(정보); //创建pic var pic = document.createElement('div'); pic.className = '사진'; info.appendChild(그림); //创建img var img = document.createElement('img'); img.src = '/jscss/demoimg/201312/' 데이터[i].src; img.style.height = '자동'; pic.appendChild(img); //创建title var title = document.createElement('div'); title.className = '제목'; info.appendChild(제목); //创建a标记 var a = document.createElement('a'); a.innerHTML = 데이터[i].제목; title.appendChild(a); } PBL('포장','상자'); } } } /** * 폭포 흐름의 주요 기능 * @param Wrap [Str] 외부 요소의 ID * @param box [Str] 각 상자의 클래스 이름 */ 함수 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); 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]); } } return 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; var scrollH = document.documentElement.scrollTop || document.body.scrollTop; return documentH scrollH>=getLastH() ?true:false; } /** * 마지막 상자가 위치한 열의 높이를 가져옵니다 */ function getLastH(){ var Wrap = document.getElementById('wrap'); var boxs = getClass(wrap,'box'); 반환 상자[boxs.length-1].offsetTop 상자[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({ '위치':'절대', 'top':top, "왼쪽":왼쪽, "불투명도":"0" }); $(box).stop().animate({ "불투명도":"1" },999); getStartNum = index;//更新请求数据的条数位置 } 瀑布流效果的school习 By Smile. 图文标题 图文标题 图文标题 图文标题 图文标题 图文标题 图文标题