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程序设计有所帮助。