먼저 렌더링을 보여 드리겠습니다.
웹 페이지 아래로 미끄러지면 사진을 자동으로로드하고 표시 할 수 있습니다.
사진을 보유하는 박스 모델은 다음과 같습니다.
<div> <div> <img src = "img/8.jpg"> </div> </div>
IMG width를 150px로 설정 한 다음 Box_IMG는 내부 마진과 그림자 효과를 추가하고 Box의 외부 마진은 0이고 내부 마진을 추가합니다. 상자의 너비는 IMG width와 margins로 뻗어 있습니다. 다시 말해, 상자 사이에는 간격이 없지만 상자 안에는 약간의 여백이 있습니다. 이런 식으로 JS의 위치를 설정할 때 마진 문제를 고려할 필요는 없으며 상자의 너비를 호출하십시오.
모든 상자를 상대적으로 보유하는 DIV의 위치를 설정하므로 최고 값 또는 왼쪽 값을 설정할 때 가장 바깥 쪽 여백 속성을 고려할 필요가 없습니다.
이미지를 놓으십시오 : 그림의 첫 번째 줄의 높이를 가져 와서 배열에 보관하십시오. 다음 그림에서 위치를 절대로 설정하고 높이가 가장 작은 그림 아래에 놓은 다음 상단과 왼쪽을 설정 한 다음 배열의 최소값을 새로 배치 된 그림의 높이에 추가하십시오. 다시 말해, 첫 번째 줄을 제외하고 HTML에 배치 된 원래 그림은 JS에서 재배치됩니다.
페이지를 하단으로 슬라이딩하면 이벤트 기능이 트리거 된 다음 일부 사진을 배치하여 그림의 무한 하중을 보장합니다.
HTML 파일 :
<! docType html> <html> <head lang = "en"> <meta charset = "utf-"> <title> </title> <link rel = "stylesheet"href = "waterfall.css"type = "text/css"> <script src = "waterfall.js"> </head> <body> <body> id = "content"> <div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg "> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg "> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg "> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img/.jpg "> </div> <img src = "img/.jpg"> </div> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> </div> </div> </div> </div> </div> src = "img/.jpg"> </div> </div> </div> <div> <img src = "img/.jpg"> </div> <img> <img src = "img/.jpg"> </div> </div> <img> <img src = "img/.jpg"> </div> </div> </div> <div> <div> <img src = "img/.j src ="img/.jpg "> </div> <div> <div> <img src ="img/.jpg "> </div> <div> <div> <img src ="img/</didg src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <img src = "img/.jpg"> </div> <div> <img/.jpg "> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> src = "img/.jpg"> </div> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> </div> </div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg "> </div> <img src = "img/.jpg"> </div> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img/.jpg "> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> </div> <img src = "img/.jpg"> </div> <div> <img/.jpg "> </div> <img> <img> src = "img/.jpg"> </div> </div> </div> <div> <img> <img src = "img/.jpg"> </div> </div> <div> <div> <img src = "img/.j src ="img/.jpg "> <div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> <div> <div> <img src = "img/.jpg"> </div> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> <div> <img src = "img/.jpg"> </div> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> </html>
CSS 파일 :
*{margin :; padding :;} #content {위치 : 상대; 배경색 : #;}. box {padding : px; float : left;}. box_img {pdding : px; px; px : px solid #cccccc; box-shadow : px #cccccc; border aradius : px;};JS 파일 :
Math.floor () 함수는 아래쪽으로 반올림 할 수 있습니다.
수학. 함수는 Heigharar 어레이의 최소값을 얻을 수 있습니다.
window.onscroll = function () {}; 이 기능은 페이지를 슬라이딩 할 때 트리거됩니다.
Document.DocumentELement.ClientHeight; 브라우저로 표시되는 높이.
document.documentElement.scrolltop; 슬라이드 거리.
/*** ASUA가 2016/4/9.*/wind lodeimage = { "date": [{ "src": "1.jpg"}, { "src": "2.jpg"}, { "src": "3.jpg"}, { "src": "4.jpg"}, { "src": "5.jpg"}, { "6.jp"}, "4.jpg"} "src": "7.jpg"}, { "src": "8.jpg"}, { "src": "9.jpg"}, { "src": "10.jpg"},]} window.onscroll = function () {if (checkflag ()) {for (var i = 0; i <lodeimage.date.length; i ++) {var box = document.createElement ( "div"); box.className = "box"; var cparent = document.getElementById ( "content"); cparent.appendChild (box); var box_img = document.createElement ( "div"); box_img.classname = "box_img"; box.appendChild (box_img); var img = document.createelement ( "img"); img.src = "img/"+lodeimage.date [i] .src; box_img.appendchild (img);} imglat ( "content", "box");}} 함수 checkflag () {var cparent = document.getlementbyid "; ccontent = getchildelement (cparent, "box"); var lastcontentheight = ccontent [ccontent.length-1] .offsetop; var scrollheight = document.documentElement.scrolltop || document.body.scrolltop; var PageHeight = document.documentElement.clientHeight || document.body.clientHeight; console.log (lastContenthEight+":"+scrollHeight+":"+pageHeight); if (scrollHeight+pageHeight) {return true;}} 함수 {var) {var cparent = document.getElementById (부모); var ccontent = getChildElement (cparent, child); var imgwidth = ccontent [0] .offsetWidth; var cols = math.floor (document.documentelement.clientWidth/imgWidth); cparent.style.csstext = "너비 :"+imgwidth*cols+"px; 마진 : 30px auto"; var heightarr = []; for (var i = 0; i <ccontent.length; i ++) {if (i <cols) {heightarr.push (ccontent [i] .offsetheight);} else {var minheight = math.min.apply (null, areigharr); var minindex = getMinIndex (Heightarr, minheight); ccontent [i] .style.position = "Absolute"; ccontent [i] .style.top = minheight+"px" ; ccontent [i] .style.left = ccontent [minindex] .offsetleft+"px"; reightarr [minindex]+= ccontent [i] .offsetheight;}}} 함수 getMinIndex (Heightarr, minHeight) {for (var i = 0; i <heightarr.length; i ++) {if (heightarr [i] == minheight) {return i;}}} 함수 getChildElement (부모, 내용) {var contentarr = []; var allcontent = parent.getElementsByTagname ( "*"); i = 0; i <allcontent.length; i ++) {if (allContent [i] .className == content) {contentArr.push (allContent [i]);}} return contentarr;}좋아, JS의 이미지를 자동으로로드하는 폭포 흐름 효과에 대한 코드가 여기에 소개되었습니다. 나는 그것이 당신에게 도움이되기를 바랍니다!