Let me show you the renderings first:
When sliding down the web page, the picture can be automatically loaded and displayed.
The box model that holds pictures is as follows:
<div><div><img src="Img/8.jpg"></div></div>
Set img-width to 150px, then box_img adds inner margin and shadow effects, box's outer margin is 0, add inner margin. The width of the box is stretched out by img-width and margins. In other words, there is no spacing between boxes, but there are some margins inside the box. In this way, when setting the position of JS, you don’t have to consider the margin issue, just call the width of the box.
Set the position of the div that holds all boxes to relative, so when setting the top value or left value, you don’t need to consider the outermost margin attribute.
Place the image: Get the height of the first row of the picture and store it in the array. Set the position to absolute in the next picture, place it below the picture with the smallest height, then set top and left, and add the minimum value of the array to the height of the newly placed picture. In other words, except for the first line, the original pictures placed in HTML are repositioned in js.
When sliding the page to the bottom, the event function is triggered, and then some pictures are placed to ensure the infinite loading of the pictures.
HTML file:
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-"><title></title><link rel="stylesheet" href="waterfall.css" type="text/css"><script src="waterfall.js"></script></head><body><div id="content"><div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><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><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><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><div><img src="Img/.jpg"></div></div><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><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div><div><img><img src="Img/.jpg"></div></div><div><img><img src="Img/.jpg"></div></div><div><div><img src="Img/.j 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><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></div><div><img src="Img/.jpg"></div></div><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><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><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div></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><div><img src="Img/.jpg"></div></div><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><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div><div><img><img src="Img/.jpg"></div></div><div><img><img src="Img/.jpg"></div></div><div><div><img src="Img/.j 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><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><div><img src="Img/.jpg"></div><div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div></div></html>
CSS File:
*{margin: ;padding:;}#content{position: relative;background-color: #;}.box{padding: px;float: left;}.box_img{padding: px;border: px solid #cccccc;box-shadow: px #cccccc;border-radius: px;}img{width: px;height: auto;}js file:
The Math.floor() function can be rounded downward.
The Math.min.apply(null,heightArr); function can obtain the minimum value of the heightArr array.
window.onscroll=function(){}; This function is triggered when sliding the page.
document.documentElement.clientHeight; the height displayed by the browser.
document.documentElement.scrollTop; the distance to slide.
/*** Created by asua on 2016/4/9.*/window.onload=function(){imgLocation("content","box");var lodeImage={"Date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.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);}imgLocation("content","box");}}} function checkFlag(){var cparent=document.getElementById("content");var ccontent=getChildElement(cparent,"box");var lastContentHeight=ccontent[ccontent.length-1].offsetTop;var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);if(lastContentHeight<scrollHeight+pageHeight){return true;}}function imgLocation(parent,child){var cparent=document.getElementById(parent);var ccontent=getChildElement(cparent,child);var imgwidth=ccontent[0].offsetWidth;var cols=Math.floor(document.documentElement.clientWidth/imgwidth);cparent.style.cssText="width:"+imgwidth*cols+"px;margin: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,heightArr);var minIndex=getMinIndex(heightArr,minHeight);ccontent[i].style.position="absolute";ccontent[i].style.top=minHeight+"px";ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";heightArr[minIndex]+=ccontent[i].offsetHeight;}}}function getMinIndex(heightArr,minHeight){for(var i=0;i<heightArr.length;i++){if(heightArr[i]==minHeight){return i;}}}function getChildElement(parent,content){var contentArr=[];var allcontent=parent.getElementsByTagName("*");for(var i=0;i<allcontent.length;i++){if(allcontent[i].className==content){contentArr.push(allcontent[i]);}}return contentArr;}Okay, the code for the waterfall flow effect that automatically loads images by js has been introduced to you here. I hope it will be helpful to you!