서버가 없기 때문에 JSON 문자열을 당겨 질 때 이미지 데이터로드 소스로 사용합니다.
HTML :
<! docType html> <html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <script src = "js/woresfall.js"> </script> <style type = "text/css"> *{padding : 0; } .pin {패딩 : 15px 0 0 15px; 플로트 : 왼쪽; } .box {패딩 : 10px; 국경 : 1px Solid #CCC; Box-Shadow : 0 0 6px #CCC; Border-Radius : 5px; } .box img {너비 : 162px; 높이 : 자동; . <img src = "./ images/4.jpg"/> </div> </div> <div> <img src = "./ images/4.jpg"/> </div> </div> <div> <img src = "./ images/5.jpg"/> </div> </div> <div> <img src = " <div> <IMG SRC = "./ images/7.jpg"/> </div> </div> <div> <img src = "./ images/8.jpg"/> </div> </div> <div> <img src = "./ images/9.jpg"/> </div> <div> <img src =. </div> <div> <img src = "./ images/10.jpg"/> </div> </div> <div> <img src = "./ images/10.jpg"/> </div> </div> <div> <img src = "./ images/10.jpg"/> </div> <div> <img src = " </div> </div> <div> <img src = "./ images/10.jpg"/> </div> </div> <div> <img src = "./ images/11.jpg"/> </div> </div> <div> <img src = "./ images/12.jpg"/> </div> </div> </div> </div> <div> <div> src = "./ images/12.jpg"/> </div> </div> <div> <img src = "./ images/13.jpg"/> </div> </div> <div> <img src = "./ 14.jpg"/> </div> </div> <div> <img src = " <div> <img src = "./ images/16.jpg"/> </div> </div> <div> <img src = "./ images/16.jpg"/> </div> </div> <div> <img src = "./ images/14.jpg"/> </div> <div> <img src =. </div> </div> <div> <img src = "./ images/16.jpg"/> </div> </div> <div> <img src = "./ images/17.jpg"/> </div> </div> <div> <img src = "./ images/18.jpg"/> </div> </div> </div> <div> <div> <div> src = "./ images/18.jpg"/> </div> </div> <div> <IMG SRC = "./ images/19.jpg"/> </div> </div> <div> <IMG Src = "./ images/20.jpg"/> </div> </div> <div> <img src = " </div> </div> </body> </html>jswallper.js :
Window.onload = function () {Waterfall ( 'main', 'pin'); var dataint = { 'data': [{ 'src': '1.jpg'}, { 'src': '2.jpg'}, { 'src': '3.jpg'}, { 'src': '4.jpg'}]}; window.onscroll = function () {if (checkscrollside ()) {var oparent = document.getElementById ( 'main'); // 부모 개체 (var i = 0; i <dataint.data.length; i ++) {var oven = document.createelement ( 'div'); // 요소 노드 추가 의견 .className = 'PIN'; // 클래스 이름 속성 추가 Oparent.AppEndChild (Opin); // 자식 노드 추가 var obox = document.createElement ( 'div'); obox.classname = 'box'; 의견. AppendChild (Obox); var oimg = document.createElement ( 'IMG'); oimg.src = './images/'+dataint.data [i] .src; Obox.appendChild (OIMG); } 폭포 ( '메인', '핀'); }; }}/* 부모 부모 ID PIN 요소 ID*/함수 폭포 (부모, 핀) {var oparent = document.getElementById (부모); // 부모 객체 var var apin = getClassObj (oparent, pin); // 스토리지 블록 상자 배열 apin var ipinw = apin [0] .OffsetWidth; num = math.floor (document.documentElement.clientWidth/iPinw); // 각 행에서 수용 할 수있는 핀의 수 [창 너비는 하나의 블록 상자 너비로 나눈] oparent.style.csstext = 'width :'+ipinw*num+'px; 마진 : 0 Auto; '; // 부모 센터링 스타일 설정 : 고정 너비 + 자동 수평 마진 var pinharr = []; // 각 열에 모든 블록 상자의 높이를 저장하는 데 사용됩니다. a (var i = 0; i <apin.length; i ++) {// 배열의 각 블록 박스 요소를 전송 apin var pinh = apin [i] .offsetheight; if (i <num) {pinharr [i] = pinh; // 첫 번째 행의 NUM 블록 박스 핀은 배열에 추가됩니다} else {var minh = math.min.apply (null, pinharr); // 배열의 최소값 Pinharr minh var minhindex = getminhindex (pinharr, minh); apin [i] .style.position = '절대'; // 절대 변위 apin [i] .style.top = minh+'px'를 설정합니다. apin [i] .style.left = apin [minhindex] .offsetleft+'px'; // 배열의 최소 요소의 높이 + 추가 [i] 블록 상자 높이 pinharr [minhindex] + = apin [i]. // 블록 상자를 추가 한 후 열 높이를 업데이트합니다}}}}}/***부모와 자식 요소의 클래스 클래스를 통해 동일한 자식 요소의 배열을 가져옵니다. obj = parent.getEmentementsByTagName ( '*'); // 부모 var 핀의 모든 서브 세트를 가져옵니다. pins.push (obj [i]); }}; 리턴 핀;}/*****최소 핀 높이 인덱스의 색인을 가져옵니다.*/function getMinHindex (arr, minh) {for (var i in arr) {if (arr [i] == minh) {return i; }}} 함수 checkscrollside () {var oparent = document.getElementById ( 'main'); var apin = getclassobj (Oparent, 'PIN'); var lastpinh = apin [apin.length-1] .offsettop + math.floor (apin [apin.length-1] .offSetheight/2); // [블록 상자 기능 Waterfall ()]의 높이를 생성합니다. 마지막 블록 상자는 높이의 상단 + 절반에서 나온 것입니다. scrolltop = document.documentElement.scrolltop || document.body.scrolltop; // 종이 높이 리턴 (lastpinh <scrolltop+documenth)? true; // 지정된 높이에 도달 한 후 true return () 함수를 트리거합니다}데모 다이어그램 :
소스 코드 다운로드 : //www.vevb.com/jiaoben/452663.html
데모 주소 : http://demo.vevb.com/js/2016/jswallper/