基于JavaScript实现瀑布流布局_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 

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