Waterfall Flow layout Based on JavaScript (ii) _JAVASCRIPT skills

This article explained the JavaScript realization Waterfall Flow Layout Detailed code, shares for everybody reference, the concrete content is as follows

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>
 
 

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;
}

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;//returns all subnodes
}
Note: The number of displays for different screen sizes 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 (parent) {var cparent = document.getElementById (parent);/Get parent node var childarray = Getchildnodes (cparent);//Get Picture quantity var Imgwidt h = childarray[0].offsetwidth;//Get photo width var screenwidth = document.documentelement.clientwidth;//Get browser width var count = Ma Th.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 pictures for (Var i=0;i<childarray.length;i++) {//If the picture gets a height in the first row if (I<count) {Imgharray[i] = Childarra
    Y[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 is an absolute layout, or you cannot change the location child Array[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 Then set the current position height to two pictures Add//start next round the cycle}}/* Get the 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.ge Telementsbytagname ("*")//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}

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 Setimglocati
  On (cparent); Set the loaded picture var data = ["Image/01.jpg", "image/02.jpg", "image/03.jpg", "image/04.jpg", "image/05.jpg", "image/06.jpg", "I Mage/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 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);//To rearrange after creating nodes   }}/* Check whether the/function Checkload (cparent) {var childarray = getchildnodes (cparent) should be loaded;//To get the number of pictures var lastimg Hight = childarray[childarray.length-1].offsettop;//Get the last picture from the top height of the 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 the number and position of pictures/function setimglocation (cparent) {var childarray = getchildnodes (cparent);//Get Picture quantity var Imgwid th = childarray[0].offsetwidth;//Get photo width var browserwidth = document.documentelement.clientwidth;//Get browser width var count = Math.floor (browserwidth/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 pictures for (Var i=0;i<childarray.length;i++) {//If the picture gets a height in the first row 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 is an absolute layout, or you cannot change the location child Array[i].style.top = minheight+ "px";/set to fill picture from top height childarray[i].style.left = childarray[minindex].offsetleft+ "px"; 
 /set to fill the picture from the left height Imgharray[minindex] + + childarray[i].offsetheight;//fill the current position height to two pictures Add//start next round of Cycle}}}/* 
      Gets the lowest 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.ge Telementsbytagname ("*")//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}

Hopefully this article will help you learn about JavaScript programming.