基于基于JavaScript实现瀑布流布局实现瀑布流布局(二二)
本文实例讲解了JavaScript实现瀑布流布局详细代码，分享给大家供大家参考，具体内容如下
1.建立建立Html模版模版
想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
</head>
<body>
<div class="container" id="container">
<div class="box_border" id="box_border">
<div class="box" id="box1">
<img src="image/01.jpg">
</div>
<!--把Box复制多份,这里因为代码重复省略了-->
</div>
</div>
</body>
</html>
2.通过通过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;
}
3.JS控制每一行所摆放的图片个数控制每一行所摆放的图片个数
上面的css布局之后,浏览器窗口大小改变,里面的图片数量也会改变,现在要用JS固定住每一行的图片数量,对于不同尺寸的屏幕
都能做到很好的效果
/*
用于加载其他函数
*/
window.onload = function(){
资源评论
