_javascript technique of waterfall flow layout based on JavaScript

This article illustrates the original JavaScript implementation of the waterfall flow layout of detailed code, share for everyone to refer to, the specific content as follows

Effect Chart:

Specific code:

Html

<! 
  DOCTYPE html>  

CSS code:

*{
   margin:0px;
   padding:0px;
}

#container {
   position:relative;
}

. box{
   padding:5px;
   Float:left
}
. box_img{
   padding:5px;
   border:1px solid #cccccc;
   box-shadow:0 0 5px #ccc;
   border-radius:5px
}

. Box_img img{
   width:150px;
   Height:auto;
}

JS Code:

Window.onload=function () {imglocation ("container", "box"); var imgdata={"Data": [{"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg"}
   , {"src": "6.jpg"}, {"src": "7.jpg"}, {"src": "8.jpg"},]};
      Window.onscroll=function () {if (Checkflag ()) {var Cparent=document.getelementbyid ("container");
         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= "images/" +IMGDATA.DATA[I].SRC;
      Boximg.appendchild (IMG);
    } imglocation ("Container", "box");
   }} function Checkflag () {var Cparent=document.getelementbyid ("container"); var Ccontent=getchildnode (Cparent,"Box");
   var lastcontentheight=ccontent[ccontent.length-1].offsettop; var scrolltop=document.documentelement.scrolltop| |
   Document.body.scrollTop; var pageheight=document.documentelement.clientheight| |
   Document.body.clientHeight;
   if (lastcontentheight<scrolltop+pageheight) {return true;
     } function Imglocation (parent,content) {var cparent=document.getelementbyid (parent);
     var ccontent=getchildnode (cparent,content);
     var imgwidth=ccontent[0].offsetwidth;
     var cols=math.floor (document.documentelement.clientwidth/imgwidth);

   cparent.style.csstext= "width:" +imgwidth*cols+ "px;margin:0 auto";
     Put the first picture on the left of the second row into the first row of the smallest height below var imgheightarr=[]; for (var i = 0; i < ccontent.length i++) {if (i<cols) {Imgheightarr[i]=ccontent[i].offsetheig          
        Ht
            }else{var minheight=math.min.apply (Null,imgheightarr);
            var minheightindex=getminheightloc (imgheightarr,minheight); ConsolE.log ("Minheightindex" +minheightindex);
      ccontent[i].style.position= "Absolute";
      ccontent[i].style.top=minheight+ "px";
      ccontent[i].style.left=ccontent[minheightindex].offsetleft+ "px";
        Imgheightarr[minheightindex]=imgheightarr[minheightindex]+ccontent[i].offsetheight;
        Console.log (Imgheightarr[i]);
        Console.log ("Height lowest:" +minheight);
   }} function Getchildnode (parent,content) {var contentarr=[];
  var allcontent=parent.getelementsbytagname ("*"); for (var i = 0; i < allcontent.length i++) {if (allcontent[i].classname==content) {Contentarr.push (allcontent
   [i]);

  }
  };
return Contentarr; } function Getminheightloc (imgheightarr,minheight) {for (var i in Imgheightarr) {if (imgheightarr[i]==minheight)
      {return i;
 }
   }
}

Hopefully this article will help you learn about JavaScript programming.