当前位置:Gxlcms > JavaScript > 基于JavaScript实现瀑布流布局_javascript技巧

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

时间:2021-07-01 10:21:17 帮助过:5人阅读

本文实例讲解了原生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程序设计有所帮助。

人气教程排行