Implement waterfall stream effect (cyclical) based on JavaScript and javascript

Implement waterfall stream effect (cyclical) based on JavaScript and javascript

1. Create an Html Template

The idea is to use a div container to carry all the content, then div box is used to place the image, and finally div box_border is used as the image box. The Code is as follows:

<! DOCTYPE html> 
Effect: (css attributes are not set, so they are placed vertically)


2. Simple Style setting through css
Mainly set horizontal placement, Photo Frame color, border and so on
/* The boundary is not left blank. The background is black and gray */body {margin: 0px; background: darkgray;}/* The total layout is set to relative Layout */. container {position: relative;}/* set the box attribute */. box {padding: 5px; float: left;}/* set the shadow and rounded corner of the image border */. box_border {padding: 5px; border: 1px solid # cccccc; box-shadow: 0px 0px 5px # ccc; border-radius: 5px;}/* set the image format */. box_border img {width: 150px; height: auto ;}
Effect: (the border has everything)


3. JS controls the number of images placed in each row
After the above css layout, the size of the browser window will change, and the number of images in the window will also change. Now we need to fix the number of images in each row with JS, which can achieve good results for screens of different sizes.
/* Used to load other functions */window. onload = function () {setImgLocation ("container");}/* set the number of images */function setImgLocation (parent) {var cparent = document. getElementById (parent); // obtain the parent node var childArray = getChildNodes (cparent); // obtain the number of images var imgWidth = childArray [0]. offsetWidth; // obtain the photo width var screenWidth = document.doc umentElement. clientWidth; // obtain the browser width var count = Math. floor (screenWidth/imgWidth); // number of entries per row cparent.style.css Text = "width:" + count * imgWidth + "px; margin: 0 auto ;"; // set its width and Center}/* obtain the number of all images */function getChildNodes (parent) {var childArray = []; // define an array to store the image boxvar tempNodes = parent. getElementsByTagName ("*"); // obtain all nodes under the parent node // cyclically Add the node with the class as box for (var I = 0; I <tempNodes. length; I ++) {if (tempNodes [I]. className = "box") {childArray. push (tempNodes [I]) ;}return childArray; // return all subnodes}
: The number of displays varies depending on the screen size.

4. JS implements static waterfall stream
First, the static layout is implemented, that is, the browser drop-down will not automatically refresh new images.
The arrangement algorithm is simple.
1. Save the height of the first row of images to an array.
2. Calculate the minimum Image Height and corresponding position in the first row.
3. Place the first image after the first row in this position.
4. Reset the height of the position to add the two images.
5. Loop 2. All remaining Images
Code:
/* Used to load other functions */window. onload = function () {setImgLocation ("container");}/* set the number and position of images */function setImgLocation (parent) {var cparent = document. getElementById (parent); // obtain the parent node var childArray = getChildNodes (cparent); // obtain the number of images var imgWidth = childArray [0]. offsetWidth; // obtain the photo width var screenWidth = document.doc umentElement. clientWidth; // obtain the browser width var count = Math. floor (screenWidth/imgWidth); // number of entries per row cparent.style.css Text = "width:" + count * imgWidth + "px; margin: 0 auto ;"; // set its width and center it. // define an array to store the first line of photo height var imgHArray = []; // traverse the image cyclically (var I = 0; I <childArray. length; I ++) {// if the image is in the first row, obtain the height if (I <count) {imgHArray [I] = childArray [I]. offsetHeight;} else // otherwise, fill the remaining image with the minimum height {var minHeight = Math. min. apply (null, imgHArray); // obtain the minimum height var minIndex = getMinIndex (minHeight, imgHArray); // obtain the subscript childArray [I] corresponding to the minimum height. style. position = "absolute"; // set the absolute layout of the image box to be filled; otherwise, the position childArray [I] cannot be changed. style. top = minHeight + "px"; // you can specify the height of the image to be filled in from childArray [I]. style. left = childArray [minIndex]. offsetLeft + "px"; // set imgHArray [minIndex] + = childArray [I]. offsetHeight; // After filling, set the current position height to the sum of the two images. // start the next cycle.}/* obtain the subscript corresponding to the minimum height. */function getMinIndex (minHeight, imgHArray) {for (var I in imgHArray) {if (imgHArray [I] = minHeight) {return I ;}}} /* obtain the number of all images */function getChildNodes (parent) {var childArray = []; // define an array to store the image boxvar tempNodes = parent. getElementsByTagName ("*"); // obtain all nodes under the parent node // cyclically Add the node with the class as box for (var I = 0; I <tempNodes. length; I ++) {if (tempNodes [I]. className = "box") {childArray. push (tempNodes [I]) ;}return childArray; // return all subnodes}
Effect:


5. js for Dynamic Loading
Dynamic Loading means that the scroll bar never slides to the bottom. To solve dynamic loading, we need to consider two issues:

1. When to load?
Sliding distance + browser height> distance from the last image to the top
2. How to load it?
Create a new node and add the node to it.

Final code:
/* Used to load other functions */window. onload = function () {var cparent = document. getElementById ("container"); // obtain the parent node setImgLocation (cparent); // set the loaded image var data = ["image/01.jpg"," image/02.jpg ", "image/resize," image/04.jpg", "image/05.jpg"," image/06.jpg", "image/07.jpg"," image/08.jpg", "image/09.jpg"," image/11.jpg ", "image/12.jpg"," image/13.jpg", "image/14.jpg"," image/15.jpg", "image/16.jpg"," image/17.jpg"]; // sliding listener window. onscroll = function () {if (checkLoad (cparent) {for (var I = 0; I <data. length; I ++) {// create a new node var div1 = document. createElement ("div"); div1.className = "box"; var div2 = document. createElement ("div"); div2.className = "box_border"; var img = document. createElement ("img"); img. className = ". box_border img "; img. src = data [I]; div2.appendChild (img); div1.appendChild (div2); cparent. appendChild (div1);} setImgLocation (cparent); // re-arrange after creating nodes}/* check whether the */function checkLoad (cparent) should be loaded) {var childArray = getChildNodes (cparent); // obtain the number of images var lastImgHight = childArray [childArray. length-1]. offsetTop; // obtain the height of the last image from the top var scrollHeight = document.doc umentElement. scrollTop | document. body. scrollTop; // get the sliding distance (annoying browser compatibility) var browserHeight = document.doc umentElement. clientHeight; // obtain the browser height if (lastImgHight <scrollHeight + browserHeight) {// determine whether to load return true;} else {return false ;}} /* set the number and position of images */function setImgLocation (cparent) {var childArray = getChildNodes (cparent); // obtain the number of images var imgWidth = childArray [0]. offsetWidth; // obtain the photo width var browserWidth = document.doc umentElement. clientWidth; // obtain the browser width var count = Math. floor (browserWidth/imgWidth); // number of items per row cparent.style.css Text = "width:" + count * imgWidth + "px; margin: 0 auto ;"; // set its width and center it. // define an array to store the first line of photo height var imgHArray = []; // traverse the image cyclically (var I = 0; I <childArray. length; I ++) {// if the image is in the first row, obtain the height if (I <count) {imgHArray [I] = childArray [I]. offsetHeight;} else // otherwise, fill the remaining image with the minimum height {var minHeight = Math. min. apply (null, imgHArray); // obtain the minimum height var minIndex = getMinIndex (minHeight, imgHArray); // obtain the subscript childArray [I] corresponding to the minimum height. style. position = "absolute"; // set the absolute layout of the image box to be filled; otherwise, the position childArray [I] cannot be changed. style. top = minHeight + "px"; // you can specify the height of the image to be filled in from childArray [I]. style. left = childArray [minIndex]. offsetLeft + "px"; // set imgHArray [minIndex] + = childArray [I]. offsetHeight; // After filling, set the current position height to the sum of the two images. // start the next cycle.}/* obtain the subscript corresponding to the minimum height. */function getMinIndex (minHeight, imgHArray) {for (var I in imgHArray) {if (imgHArray [I] = minHeight) {return I ;}}} /* obtain the number of all images */function getChildNodes (parent) {var childArray = []; // define an array to store the image boxvar tempNodes = parent. getElementsByTagName ("*"); // obtain all nodes under the parent node // cyclically Add the node with the class as box for (var I = 0; I <tempNodes. length; I ++) {if (tempNodes [I]. className = "box") {childArray. push (tempNodes [I]) ;}return childArray; // return all subnodes}
Effect:


Articles you may be interested in:

 

 
  
Js-implemented beauty falls stream effect code
 
  
Implementation of javascript adaptive width waterfall stream
 
  
Pure js enables waterfall stream display of photos (automatically adapts to the window size)
 
  
Analysis of waterfall stream layout: Implementation of JS + absolute positioning
 
  
Example of a simple method for js to implement waterfall stream
 
  
Native JavaScript + LESS implement waterfall stream
 
  
Problems and Solutions for implementing waterfall stream adaptive using javascript
 
  
Js Implementation of Baidu waterfall stream Imitation Method
 
  
Native JS implements responsive waterfall stream Layout
 
  
Avalonjs: Making responsive waterfall stream Effects