基于JavaScript实现瀑布流布局

本文实例讲解了原生JavaScript实现瀑布流布局详细代码，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

HTML

CSS代码：

*{
   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代码：

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 
 

希望本文所述对大家学习javascript程序设计有所帮助。