이 기사는 모든 사람의 참조를 위해 JS 폭포 흐름의 하중 효과를 공유합니다. 특정 내용은 다음과 같습니다
마우스 스크롤링 이벤트 마우스가 바닥으로 스크롤하면 그림을 동적으로로드합니다.
1. HTML 코드
<! docType html> <html> <head> <meta charset = "utf -8"> <title> js 폭포 흐름 효과 - 동적 로딩 그림 </title> <link "href ="css/waterfallflow.css "type/css"/script src = "js/waterfallfow.j"> </head> <body> <div id = "컨테이너"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <div> <img src = "img/3. jpg"/> </div> </div> <img src = "img/4. 4. src = "img/4.jpg"/> </div> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <img src = "IMG/7. JPG src = "img/3.jpg"/> </div> </div> <div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> </div> <div> <img src = "img/2.jpg"////div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <img src = "img/3.jpg"/> 3.jpg "/> 3.jpg/3.jpg" <div> <img src = "img/4.jpg"/> </div> </div> <div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> <div> <img src = "img/6.jpg/6.jpg/6.jpg"/6.jpg "/6.jpg"/div> </div> </div> </body> </html>
2. CSS 코드
*{마진 : 0px; 패딩 : 0px;}#컨테이너 {위치 : 상대;}. 상자 {패딩 : 5px; 플로트 : 왼쪽; 여백 : 0px auto;}. box_img {패딩 : 5px; 국경 : 1px 고체 #dcdcdc; Box-Shadow : 0 0 5PX #CCC; Border-Radius : 5px;}. box_img img {너비 : 230px;}3. JavaScript 코드
window.onload = function () {imglocation ( "컨테이너", "box"); var imgdata = { "data": [{ "src": "1.jpg"}, { "src": "2.jpg"}, { "src": "3.jpg"}, { "src": "3.jpg"}, { "src": "4.jpg"}, { "Src" "" 5.jpg "}, {"src ":"6.jpg "}, {"src ":"2.jpg "}, {"src ":"3.jpg "}, {"src ":"3.jpg "}, {"src ":"4.jpg "}}"{ "src". Window.onscroll = function () {// console.log (document.documentElement.scrolltop); if (checkflag ()) {var cparent = document.getElementById ( "컨테이너"); for (var i = 0; i <imgdata.data.length; i ++) {var ccontent = document.createElement ( "div"); ccontent.classname = "box"; cparent.appendChild (ccontent); var boximg = document.createElement ( "div"); boximg.classname = "box_img"; ccontent.appendChild (boximg); var img = document.createElement ( "IMG"); img.src = "img/"+imgdata.data [i] .src; Boximg.appendChild (IMG); // 다른 메소드는 원본 내용을 덮어 쓰지 않고 DIV 뒤에 내용을 추가합니다. // var content = "<div class = 'box'> <div class = 'box_img'> <img src = 'img/"+imgdata.data [i] .src+"'// cparent.innerhtml+= content (} imglocation ("box ") checkflag () {var cparent = document.getElementById ( "컨테이너"); var ccontent = getChildElement (cparent, "box"); // var var var atrostcontentheight = cccontent [ccontent.length-1] .OffSetTop; // scrolltop = document.documentElement.scrolltop || document.body.scrolltop; // scrollbar는 최상위 높이 var var var var var pageheight = document.documentElement.clientHeight || document.body.clientHeight; // Screen Height // console.log (LastContentheight+","+pageheight+"; if (lastcontentheight <scrolltop+pageheight) {return true}} function imglocation (parent, content) {var cparent = getchildelement (cparent, content); // 모든 상자 [0]. num = math.floor (document.documentElement.clientWidth/imgwidth); // 사진의 수를 한 행 cparent.style.csstyex.csstyext = "너비 :"+imgwidth*num+"px; 마진에 넣습니다. i = 0; i <ccontent.length; i ++) {if (i <num) {boxHeightArg [i] .OffSetHeight} else {var minHeight = math.min.apply (null, minume var var var minindexar); index BoxHeightarr [minindex]+= ccontent [i] .offsetheight; // console.log (ccontent [i] .offsetheight+","+ccontent [i] .Height); // ccontent [i] .Height = undefined}}} function getminHeightloction (boxHeightar, for var var var) boxHeightArr) {if (boxHeightArg [i] == minHeight) {return i}}} getChildElement (부모, 내용) {// var var allcontent = []; if (allContent [i] .classname == "box") {contentarr.push (allContent [i])} return contentarr;}.위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.