This article uses pure JS code to write a waterfall flow web page effect, initially implementing a basic waterfall flow layout, and simulate ajax data loading new image function after scrolling to the bottom.
shortcoming:
1. The program is not responsive and cannot adjust the page width in real time;
2. When ajax simulation data pictures are added to the program, all pictures on the entire page are repositioned once.
3. The program waits for all pictures to be loaded before reading the size of the picture. In fact, this is definitely not possible.
4. In actual projects, the background program should give the image size value and directly use the width attribute of the image in the js code.
Ideas for this program:
html structure:
<body> <div id="container"> <div> <div> <img src="img/1.jpg" /> </div> </div> <div> <div> <img src="img/2.jpg" /> </div> </div> ... </div></body>
1. Initialize the layout
1. Set #container to position:relative;
2. Set .box to float:left;
3. Position all pictures after the web page is loaded;
3.1 The image width is fixed. Calculate the number of pictures that can be accommodated by each row of the current page, and obtain the width of #container, and then set the page to center;
3.2 Loop through all pictures, the default float layout of the first num pictures is as the first row, and the array BoxHeightArr = [];
3.3 After the first line layout is completed, arrange the next picture and update BoxHeightArr[]:
3.3.1 Place the next picture below the shortest picture in the first row (position:absolute), that is, the column with the smallest height in BoxHeightArr[], and record the index value of the following numbers: minIndex;
3.3.2 Update the smallest value in BoxHeightArr[] (BoxHeightArr[minIndex]+the current image height);
3.4 Repeat the cycle 3.3 steps until all pictures are arranged
2. Real-time monitoring of scrolling height, whether new data is to be loaded
1. After the initialization is completed, get the height of the last image from the top: lastContentHeight
2. Use window.onscroll = function(){...}
Real-time monitoring of the scroll height of the current page is: scrollTop
Real-time monitoring of the current page window height is: pageHeight
3. When the page monitors: lastContentHeight < scrollTop + pageHeight, use ajax to obtain the json data of the newly added image.
3. Add new content at the bottom of the page
1. Use a loop to create a new picture container first, add it to the bottom, and then write the corresponding picture data such as paths in the json data to the container to complete the addition of the picture.
2. After all new pictures are added, re-execute the initialization operation of step 1 for all pictures and layouts of the entire page.
Project folder:
index.html: Pre-place part of the image data
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="js/app.js"></script> <title>JavaScript Waterfall Flow</title> </head> <body> <div id="container"> <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> <div> <img src="img/4.jpg"/> </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> </div> <div> <img src="img/6.jpg"/> </div> </div> <div> <img src="img/7.jpg"/> </div> </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> <div> <img src="img/9.jpg"/> </div> </div> <div> <img src="img/9.jpg"/> </div> </div> <div> <div> <img src="img/10.jpg"/> </div> </div> <div> <img src="img/1.jpg"/> </div> </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> <div> <img src="img/4.jpg"/> </div> </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> <div> <img src="img/6.jpg"/> </div> </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> <div> <img src="img/6.jpg"/> </div> </div> </div> <div> <div> <img src="img/7.jpg"/> </div> </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> <div> <img src="img/10.jpg"/> </div> </div> <div> <img src="img/1.jpg"/> </div> </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> <div> <img src="img/4.jpg"/> </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> </div> <div> <img src="img/6.jpg"/> </div> </div> <div> <img src="img/7.jpg"/> </div> </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> <div> <img src="img/9.jpg"/> </div> </div> <div> <img src="img/9.jpg"/> </div> </div> <div> <div> <img src="img/9.jpg"/> </div> </div> <div> <div> <img src="img/10.jpg"/> </div> </div> </div> </body></html>
style.css:
*{ margin: 0; padding: 0;}#container{ position: relative;}.box{ padding: 5px; float: left;}.box_img{ padding: 5px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; border-radius: 5px;}.box_img img{ width: 150px; height: auto;}app.js:
window.onload = function(){ imgLocation("container", "box"); //ajax simulated data var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"}]} window.onscroll = function(){ if(checkFlag()){ //Judge whether new data is to be loaded at the bottom var cparent = document.getElementById("container"); //Load ajax data into the page 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); } //Reposition all image data once imgLocation("container", "box"); } }};function checkFlag(){ var cparent = document.getElementById("container"); var ccontent = getChildElement(cparent, "box"); //Get the height of the last image from the top, scroll height, window height 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(parent, content){ //Take all contents under parent out of var cparent = document.getElementById(parent); var ccontent = getChildElement(cparent, content); //Correate the number of pictures per line according to the width of the current browser window and fix it, center var imgWidth = ccontent[0].offsetWidth; //offsetWidth = width + padding + border var num = Math.floor(document.documentElement.clientWidth / imgWidth); cparent.style.cssText = "width:"+imgWidth*num+"px; margin:0 auto"; //alert("pause"); //Set an array to host the image information of the first row var BoxHeightArr = []; for(var i=0; i<ccontent.length; i++){ if(i<num){ //Record the height of the picture in the first row BoxHeightArr[i] = ccontent[i].offsetHeight; //When the ajax data is loaded, the program repositions all pictures, so the picture in the first row must be cleared position:absolute ccontent[i].style.position = "static"; }else{ var minHeight = Math.min.apply(null, BoxHeightArr); var minIndex = getminheightLocation(BoxHeightArr, minHeight); //Put the picture below the smallest index value of the first row ccontent[i].style.position = "absolute"; ccontent[i].style.top = minHeight+"px"; ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px"; //After the picture is placed, update the "minimum height of the first row of image information", // Then use the for loop to repeat this action until the end BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight; } };}//Get the index value with the smallest height of the first row of image getminheightLocation(BoxHeightArr, minHeight){ for(var i in BoxHeightArr){ if(BoxHeightArr[i] == minHeight){ return i; } }}//Get all boxfunction getChildElement(parent, content){ contentArr = parent.getElementsByClassName(content); return contentArr;}Reproduction image:
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.