本文实例讲解了JavaScript实现瀑布流布局详细代码,分享给大家供大家参考,具体内容如下
1.建立Html模版
想法是先用一个div container承载所有内容,然后div Box用来放置图片,最后div Box_border来当图片框,代码如下
<div class="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" id="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1">
<img src="image/01.jpg">
</div>
</div>
2.通过css简单设置样式
主要设置水平放置,相框颜色,边界之类的
<div class="jb51code">
<pre class="brush:css;">
/
边界不留空,背景黑灰
/
body{
margin: 0px;
background: darkgray;
}
/
总布局设置为相对布局
/
.container{
position: relative;
}
/
设置Box属性
/
.Box{
padding: 5px;
float: left;
}
/设置图片边框阴影和圆角
/
.Box_border{
padding: 5px;
border: 1px solid #cccccc;
Box-shadow: 0px 0px 5px #ccc;
border-radius: 5px;
}
/设置图片格式/
.Box_border img{
width: 150px;
height: auto;
}