이 기사는 순수한 JS 코드를 사용하여 폭포 흐름 웹 페이지 효과를 작성하고 처음에는 기본 폭포 흐름 레이아웃을 구현하고 바닥으로 스크롤 한 후 새로운 이미지 기능을로드하는 AJAX 데이터를 시뮬레이션합니다.
결점:
1. 프로그램은 응답하지 않으며 페이지 너비를 실시간으로 조정할 수 없습니다.
2. AJAX 시뮬레이션 데이터 사진이 프로그램에 추가되면 전체 페이지의 모든 사진이 한 번 재배치됩니다.
3. 프로그램은 그림의 크기를 읽기 전에 모든 사진을로드 할 때까지 기다립니다. 사실, 이것은 확실히 불가능합니다.
4. 실제 프로젝트에서 배경 프로그램은 이미지 크기 값을 제공하고 JS 코드에서 이미지의 너비 속성을 직접 사용해야합니다.
이 프로그램에 대한 아이디어 :
HTML 구조 :
<body> <div id = "컨테이너"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <div> <img src = "img/2.jpg"/> </div> ... </div> </body> ...
1. 레이아웃을 초기화하십시오
1. #container를 위치로 설정하십시오 : 상대;
2. 부유물로. 상자를 설정하십시오 : 왼쪽;
3. 웹 페이지가로드 된 후 모든 그림을 배치하십시오.
3.1 이미지 너비가 고정되어 있습니다. 현재 페이지의 각 행에서 수용 할 수있는 그림 수를 계산하고 #Container의 너비를 얻은 다음 페이지를 중앙으로 설정하십시오.
3.2 루프 모든 그림을 통해 첫 번째 num 그림의 기본 플로트 레이아웃은 첫 번째 행과 어와 배열 BoxHeightArr = [];
3.3 첫 번째 줄 레이아웃이 완료된 후 다음 사진을 정렬하고 BoxHeightarr []를 업데이트하십시오.
3.3.1 다음 그림 아래 그림을 첫 번째 줄 (위치 : 절대), 즉 BoxHeightarr []에서 가장 작은 높이를 가진 열에 다음 그림을 놓고 다음 숫자의 인덱스 값을 기록하십시오. minindex;
3.3.2 BoxHeightarr []에서 가장 작은 값을 업데이트하십시오.
3.4 모든 그림이 배열 될 때까지 3.3 단계를 반복하십시오.
2. 새로운 데이터를로드할지 여부에 관계없이 스크롤 높이의 실시간 모니터링
1. 초기화가 완료된 후, 마지막 이미지의 높이를 상단에서 가져옵니다 : LastContentheight
2. window.onscroll = function () {... ...} 사용
현재 페이지의 스크롤 높이의 실시간 모니터링은 다음과 같습니다.
현재 페이지 창 높이의 실시간 모니터링은 다음과 같습니다.
3. 페이지를 모니터링 할 때 : LastContentheight <ScrollTop + PageHeight를 사용하면 Ajax를 사용하여 새로 추가 된 이미지의 JSON 데이터를 얻으십시오.
3. 페이지 하단에 새 콘텐츠 추가
1. 루프를 사용하여 새로운 그림 컨테이너를 먼저 만들고 바닥에 추가 한 다음 JSON 데이터의 경로와 같은 해당 그림 데이터를 컨테이너에 써서 그림의 추가를 완료하십시오.
2. 모든 새로운 사진이 추가 된 후 전체 페이지의 모든 그림과 레이아웃에 대한 1 단계의 초기화 작업을 다시 실행하십시오.
프로젝트 폴더 :
index.html : 이미지 데이터의 사전 배치
<! docType html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet"type = "text/css"href = "css/style.css"/> <script src = "js/app.js"> id = "컨테이너"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> <div> <img src = "img/4. </div> </div> <div> <img src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> <img src = "img src ="img src = "img src =. </div> </div> <div> <img src = "img/7.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> <div> <img src = "img/8.jpg"/> </div> <div> <img src = "img/9.. </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> <div> <div> <img src = "img/10.jpg"/> src = "img/1.jpg"/> </div> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <img src = "img/3. jpg"//div> </div> </div>. 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"/>>> </div> </div> <img " src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <img src = "img/6.jpg src = "img/6.jpg"/> </div> </div> </div> <div> <div> <img src = "img/7.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> <img src = "img/8.Jpg"/>> 8.Jpg/8.JPg/8.JPG/8.JPG/8.JPG/8.JPG/8. <div> <IMG SRC = "IMG/9.jpg"/> </div> </div> <div> <IMG SRC = "IMG/10.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> <img src = "img/1.jpg"/>>> 1.jpg/1.jpg/1.jpg/1.jpg/1.jpg/1.jpg/1.jpg/1.jpg/1.jpg/1.jpg/1. <div> <img src = "img/2.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <img src = "img/4.jpg"/> </div> </div> <img src = "img/4.jpg"/> 4.jpg "/> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <img src = "img/7.jpg"/> 7.jpg "/> 7.jpg"/</div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <img src = "img/9.jpg"//>. <div> <IMG SRC = "IMG/9.JPG"/> </div> </div> <div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <img src = "img/10.jpg"/> </div> </div> </html> </html>
style.css :
*{마진 : 0; 패딩 : 0;}#컨테이너 {위치 : 상대;}. 상자 {패딩 : 5px; float : 왼쪽;}. box_img {패딩 : 5px; 국경 : 1px Solid #CCC; Box-Shadow : 0 0 5PX #CCC; Border-Radius : 5px;}. box_img img {너비 : 150px; 높이 : 자동;}app.js :
window.onload = function () {imglocation ( "컨테이너", "box"); // ajax 시뮬레이션 된 데이터 var imgdata = { "data": [{ "src": "2.jpg"}, { "src": "3.jpg"}, { "src": "4.jpg"}, { "src": "5.jpg"}, { "src": "6.jpg"}, { "8.jp g "}, {"src ":"2.jpg "}, {"src ":"3.jpg "}, {"src ":"4.jpg "}, {"src ":"5.jpg "}, {"src ":"6.jpg "}, {"src ":"8.jpg "}}. window.onscroll = function () {if (checkflag ()) {// 새 데이터가 하단에로드 될지 여부를 판단합니다. var cparent = document.getElementById ( "컨테이너"); // (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); } // imglocation ( "컨테이너", "box") 일단 모든 이미지 데이터를 재배치합니다. }}}; function checkflag () {var cparent = document.getElementById ( "컨테이너"); var ccontent = getchildelement (cparent, "box"); // 마지막 이미지의 높이를 상단, 스크롤 높이, 창 높이 VAR LastContenthEight = ccontent [ccontent.length-1] .OffSetTop; var scrolltop = document.documentElement.scrolltop || document.body.scrolltop; var pageheight = document.documentElement.clientHeight || document.body.clientHeight; console.log (lastcontentheight+":"+scrolltop+":"+pageHeight); if (lastcontentheight <scrolltop + pageheight) {return true; }} function imglocation (부모, 내용) {// var cparent = docum var ccontent = getchildelement (cparent, 컨텐츠); // 현재 브라우저 창의 너비에 따라 한 줄 당 사진 수를 구부리고 수정하고 CENTRE VAR IMGWIDTH = CCONTENT [0] .OffSetWidth; // offsetWidth = width + padding + border var var = math.floor (document.documentElement.clientWidth /imgwidth); cparent.style.csstext = "너비 :"+imgwidth*num+"px; 마진 : 0 Auto"; // Alert ( "일시 정지"); // 첫 번째 행의 이미지 정보를 호스팅하기 위해 배열을 설정합니다 var boxHeightArr = []; for (var i = 0; i <ccontent.length; i ++) {if (i <num) {// 첫 번째 행 BoxHeightarr [i] = ccontent [i] .offsetheight; // ajax 데이터가로드되면 프로그램이 모든 그림을 재배치하므로 첫 번째 행의 그림은 위치를 지워야합니다. 절대 ccontent [i] .style.position = "static"; } else {var minheight = math.min.apply (null, boxheightarr); var minindex = getMinHeightLocation (BoxHeightarr, MinHeight); // 첫 번째 행 CCONTENT의 가장 작은 인덱스 값 아래 그림을 넣습니다. [i] .style.position = "절대"; ccontent [i] .style.top = minheight+"px"; ccontent [i] .style.left = ccontent [minindex] .offsetleft+"px"; // 그림이 배치 된 후 "이미지 정보의 첫 번째 행의 최소 높이"를 업데이트 한 다음 // 후 루프를 사용하여 끝이 끝날 때 까지이 작업을 반복하십시오 [minIndex] = BoxHeightArg [MinIndex] + CCONTENT [i] .OffSetHeight; }};} // 이미지의 첫 번째 행의 가장 작은 높이 GetMinHeightLocation (boxHeightarr, minHeight) {for (boxHeightArr의 var i) {if (boxHeightArg [i] == minHeight) {return i; }}} // 모든 BoxFunction GetChildElement (부모, 내용) {contentArr = parent.getElementSyClassName (content); 반환 contentarr;}생식 이미지 :
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.