输入banner图图片脚本导航/分类

基于JavaScript实现瀑布流布局_javascript技巧

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

效果图:

具体代码:

HTML




  
  Document
  
  

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代码:

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