Using JS to realize simple waterfall flow effect

Haha, I am here again, in this period of time, I have a simple study of JavaScript (JS), although not very understand, but I also simply try to do a little things, such as the current popular waterfall flow effect, after my efforts finally successfully completed, although the middle of a very bumpy, not Smooth sailing But finally I have achieved a simple effect, the following for everyone simple introduction, do not know friends, interested, you can refer to the following, welcome to point out the shortcomings and deficiencies!

I. Prepare for waterfall Flow

   First of all, in order to facilitate presentation and contact, I use a local picture, if you need to try to write down the network, but the local and remote is roughly the same. Then I will briefly introduce the local waterfall effect bar, we have to prepare eight or nine pictures, of course, we realize the waterfall flow effect, so it is best to be highly different, so that you can see the effect, right, hey.

Two. The preparation of the code

  We open the development tool, first build an HTML project, write the following code internally, because it is ready to work, so just started to write a number of basic things, do not explain, directly on the code:

 
 

       
  

             
   

                         
   
     
  
      
  

            
   

                          
   
     
  
      
  

            
   

                          
   
     
  
     
  

            
   

                         
   
     
  
    
  

            
   

                         
   
     
  
    
  

            
   

                         
   
     
  
     
  

            
   

                         
   
     
  
    
  

            
   

                         
   
     
  
    
  

            
   

                         
   
    ;/div>     
   

             
    

                          
    
          
    

              
     

                           
     
     
    
     
    

              
     

                           
     
     ≪/div> 
    
  
   
  
 

Obviously this code is a few div tags and several img tags, so it is very simple, do not say more, the following we have to decorate CSS style.

Three. CSS style layout

If you say something more honestly, for waterfall flow, because I am just a simple simulation, so CSS style customization, I do not have a particularly complex customization, but simply put the border and container (DIV) Size to customize the next, there are some colors, say not more, directly on the code

/* Use wildcards to set both internal and external margins to zero, so look good
/*{margin:0px;
padding:0px;
}
/* Set the layout of the primary container to relative layout
/#contianer {
position:relative
}

.    box{
padding:5px;
Float:left;
}
/* Customize the color and border size and rounded corners of the container that hosts the picture/*
boximg{
padding:5px;
box-shadow:0 0 5px #ccc;
border:1px solid #cccccc;
border-radius:5px;
}
/* Custom picture Size *
/boximg img{
width:250px;
Height:auto;
}

The comments in the code are clearly explained, so you don't have to repeat them too much.

Four. The focus is also the waterfall flow difficulties (JS implementation)

Everyone is not unfamiliar with the waterfall flow, it is mainly the top wide, then the layout is based on the height, that is, when the first row is full, ready to arrange the second row, the second row of the first picture in the first line of the height of the picture, and so on, and so on the first simple code, and then explained one by one, There is a picture of the truth, haha!

This is not written in the JS code of the effect, then, according to the truth, the following picture should be placed in the first row of the second picture below the position, should make full use of the blank resources, then how to achieve it, then I will attach code to tell you:

Window.onload = function () {    waterflow ("Container", "box");   } function Waterflow (parent, Chirld) {    var wparent = document.getElementById (parent);//Get parent Div, the most outer-level container     var Allarr = Getallchirld (Wparent,chirld);//Get the container div     var wscreenwidth of all Class box document.documentelement.clientwidth;//Get screen width     var wchirldwidth = wparent.getelementsbytagname ("* //Get all tags     var num = Math.floor (wscreenwidth/wchirldwidth[0].offsetwidth);//This is a Math algorithm, The goal is to convert decimals to integers    //So that you can know the maximum number of pictures per line to hold     wparent.style.cssText = "width:" +wchirldwidth[ 0].offsetwidth*num+ "px;margin:0 Auto"; fixed the number of each row and up and down the left and right margin    //Get the minimum height of each row    
Getminheightofcols (Allarr, num); function Getallchirld (parent,classname) {   //Get all tags     var wchirld =
Parent.getelementsbytagname ("*");    //Create array     var chirldarr = [];    //Traverse Wchirld, put the same label classname equal to classname (incoming parameters) into the array Chirldarr     for (var i = 0; i  
Note has been very clear, if there is no understanding of the place, welcome comments, the following let us look at the effect of the picture bar, hey
 
 
Five. Waterfall Flow simulation Network Load written here Many people must think it's almost over, but I would like to expand a little knowledge, that is how to achieve similar to the unlimited load on the network, the following code bar, due to the time is a little nervous do not do a detailed introduction, there is not know how to welcome wise:
Window.onload = function () {
Waterflow ("Container", "box");
var dataint={"Data": [{"src": "1.jpeg"},{"src": "2.jpg"},{"src": "3.jpg"},{"src": "4.jpg"},{"src": "5.jpg"},{"src": "6." JPG "},
{"src": "7.gif"},{"src": "8.jpg"},{"src": "9.jpg"}]};

			
Window.onscroll=function () {
if (Checkscrollside ()) {
var oparent = document.getElementById ("container");//Parent Object
for (Var i=0;ivar opin=document.createelement ("div"); add element node
Opin.classname= "box"; Add Class name Name property
Oparent.appendchild (Opin); Add child nodes
var obox=document.createelement ("div");
Obox.classname= "Boximg";
Opin.appendchild (Obox);
var oimg=document.createelement ("img");
Oimg.src= "./img/" +DATAINT.DATA[I].SRC;
Obox.appendchild (OIMG);
}
Waterflow ("Container", "box");
};
}
}
 
Because of the size of the picture can not bring you the effect of the picture, I hope I forgive.

Well, today's sharing is here, hope that we have more comments, there will be time to come again, do not know can also ask a question ha, Hei, the above is a simple waterfall flow effect, not bad, come on!