_javascript technique of waterfall flow effect (circular asymptotic) based on JavaScript

1. Create HTML templates

The idea is to use a DIV container to host all the content, then div box to place the picture, the last div box_border to when the picture box, the code as follows

<! DOCTYPE html>
 
 

Effects: (CSS properties are not set so they are all placed vertically)

2. CSS simple to set the style

The main settings are horizontal placement, photo frame color, border, etc.

/* Boundary is not blank, background black ash
* * *
body{
margin:0px;
Background:darkgray;
}
/* The general layout is set to relative layout
/* container{
position:relative
}
/* Set box
properties
/* box{
padding:5px;
Float:left;
}
/* Set picture Border Shadow and rounded corners/
*
box_border{
padding:5px;
border:1px solid #cccccc;
box-shadow:0px 0px 5px #ccc;
border-radius:5px;
}
/* Set Picture format
/* Box_border img{
width:150px;
Height:auto;
}

Effect: (The Border has everything)

3.JS controls the number of pictures placed on each line

The above CSS layout, browser window size changes, the number of pictures inside will also change, now to use JS to hold the number of each row of pictures, for different sizes of the screen can do very good results

/* is
used to load other functions/
*
window.onload = function () {
setimglocation ("container");
}
/* Set the number of pictures */
function setimglocation (parent) {
var cparent = document.getElementById (parent); Get the parent node
var childarray = getchildnodes (cparent);//Get Picture quantity
var imgwidth = childarray[0].offsetwidth;//Get photo width
var screenwidth = document.documentelement.clientwidth;//Get browser width
var count = Math.floor (screenwidth/ ImgWidth);//The number of each line
Cparent.style.cssText = "width:" +count*imgwidth+ "px;margin:0 auto;"; /set its width and center

}/
*
Get the number of all Pictures/
function Getchildnodes (parent) {
var childarray =[];// Define an array to store the picture box
var tempnodes = parent.getelementsbytagname ("*");//Get all nodes under the parent node
//Loop Add the node
with class box for (var i = 0;i<tempnodes.length;i++) {
if (tempnodes[i].classname = = "box") {
Childarray.push (tempnodes[ I]);
}
Return childarray;//all child nodes
}

Effect Chart: The number of display for different screen size is not the same

4.JS implementation of static waterfall flow

The first implementation of the static layout, that is, browser dropdown will not automatically refresh the new picture.

It's simple to implement an arrangement algorithm

1. Save the height of the first row of pictures to an array
2. Calculate the minimum height and corresponding position of the picture in the first row
3. Put the first picture after the first row in that position
4. Reset the height of the position to add two pictures
5. Cycle 2 All remaining pictures

Code:

/* is used to load other functions/* window.onload = function () {setimglocation ("container");}/* Set the number and position of pictures/function setimglocation (paren  T) {var cparent = document.getElementById (parent);//Get parent node var childarray = Getchildnodes (cparent);//Get picture quantity var imgwidth = childarray[0].offsetwidth;//Get photo width var screenwidth = document.documentelement.clientwidth;//Get browser width var count = Math.floor (screenwidth/imgwidth);//The number of each row Cparent.style.cssText = "width:" +count*imgwidth+ "px;margin:0 auto;";
/set its width and center//define array, store the first row of photos height var imgharray = []; Looping through the picture for (Var i=0;i<childarray.length;i++) {//If the picture is in the first row gets the height if (i<count) {imgharray[i] = Childarray[i].
offsetheight; }else//otherwise the minimum height of the fill remaining picture {var minheight = Math.min.apply (Null,imgharray);//Get minimum height var minindex = getminindex (MinHeight, Imgharray)//Get the lowest height corresponding subscript childarray[i].style.position = "absolute";//Set the picture box to be filled with an absolute layout, or you cannot replace the position childarray[i]. Style.top = minheight+ "px";/set to fill picture from top height childarray[i].style.left = childarray[minindex].offsetleft+ "px"; Set the picture to fill the left height Imgharray[minindeX] + + childarray[i].offsetheight;//fills the current position height to two picture Add//start next round of Loop}}//* Get the minimum height corresponding subscript/function Getminindex (minheight,i Mgharray) {for (var i in Imgharray) {if (imgharray[i) = = MinHeight) {return i}}}//* Get the number of all Pictures/function getchildnodes ( Parent) {var Childarray =[];//defines an array to store the picture box var tempnodes = Parent.getelementsbytagname ("*");//Get all nodes under the parent node// Loop to add the node for the class box for (var i = 0;i<tempnodes.length;i++) {if (Tempnodes[i].classname = = "box") {Childarray.push (
Tempnodes[i]); Return childarray;//all child nodes}

Effect:

5.js implementation Dynamic Loading

Dynamic loading means that the scroll bar never slides to the bottom, and to solve dynamic loading we need to consider two issues:

1. When does it load?

Sliding distance + Browser height > distance from top of last picture

2. How to load?

By creating a new node, add the Created node

Final code:

/* Used to load other functions/* window.onload = function () {var cparent = document.getElementById ("container");/Get parent node Setimglocation (CPA
Rent); Set the loaded picture var data = ["Image/01.jpg", "image/02.jpg", "image/03.jpg", "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 "]; Slide Listener Window.onscroll = function () {if (Checkload (cparent)) {for (var i = 0; i < data.length; i++) {//Create new node Var d
IV1 = 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);//Create Node Rearrange}}}/* Check if the/function Checkload (cparent) {var childarray = Getchildnodes (CPA Rent)//Get picture number var lastimghight = childarray[childarray.length-1].offsettop;//get the last picture from the top height of var scrollheight = document.documentelement.scrolltop| | document.body.scrolltop;//Get sliding distance (browser compatibility really annoying) var browserheight = document.documentelement.clientheight;//Get browser height if ( Lastimghight < Scrollheight+browserheight) {//To determine whether to load return true;}
else {return false;}} /* Set picture number and position arrangement/function setimglocation (cparent) {var childarray = getchildnodes (cparent);//Get picture quantity var imgwidth = Childa rray[0].offsetwidth;//Get photo width var browserwidth = document.documentelement.clientwidth;//Get browser width var count = Math.floor ( Browserwidth/imgwidth);//The number of each line Cparent.style.cssText = "width:" +count*imgwidth+ "px;margin:0 auto;";
/set its width and center//define array, store the first row of photos height var imgharray = []; Looping through the picture for (Var i=0;i<childarray.length;i++) {//If the picture is in the first row gets the height if (i<count) {imgharray[i] = Childarray[i].
offsetheight; }else//otherwise the minimum height of the fill remaining picture {var minheight = Math.min.apply (Null,imgharray);//Get minimum height var minindex = getminindex (MinHeight, Imgharray)//Get the minimum height corresponding to the subscript childarray[i].style.position = "ABsolute "//Set the picture box to be filled is an absolute layout, otherwise you cannot replace the position childarray[i].style.top = minheight+" px ";/set to fill the picture from the top height childarray[i]. Style.left = childarray[minindex].offsetleft+ "px";/set to fill picture from left height imgharray[minindex] + = childarray[i].offsetheight;/
/fill the current position height set to two pictures Add//start next round the cycle}}///Get minimum height corresponding subscript/function Getminindex (Minheight,imgharray) {for (var i in Imgharray) {
if (imgharray[i] = = minheight) {return i;}} /* Get the number of all Pictures/function getchildnodes (parent) {var Childarray =[];//define an array to store the picture box var tempnodes = Parent.getelementsbyt Agname ("*")//Get all nodes under the parent node//Loop Add class to box node for (var i = 0;i<tempnodes.length;i++) {if (Tempnodes[i].classname =)
Box ") {Childarray.push (tempnodes[i]);} Return childarray;//all child nodes}

Effect: