一：查询知识点
offsetWidth,offsetHeight表示加上边框的宽度和高度offsetLeft,offsetTop表示到浏览器或者offsetParent设置的父对象的左边和上边的距离clientHeight,clientWidth表示去掉边框的高度和宽度(内容可视区域的高度和宽度)clientLeft,clientTop表示左边框和上边框的宽度友情提示：上面四个属性解释可能不太准确，是我自己用代码测试的~~~实在是看了好几篇文章也没弄清楚他们的确切定义，可能我太笨了transition(css3属性): property duration timing-function delay;分别是过渡效果的 CSS 属性的名称，过渡效果需要多少秒或毫秒，速度效果的速度曲线，过渡效果何时开始；js创建元素的两种方法:使用createElement()函数进行创建元素节点，然后使用appendChild()函数添加到相应html位置
案例：
var div
= document
.createElement('div');
div
.innerHTML
= 1;
document
.body
.appendChild(div
);
使用字符串进行创建，将创建的html元素写成字符串样式，然后用innerHTML传给相应的dom节点
案例：
var img
=img
+= '<img src="img/' + 1 + '.jpg" />';
document
.getElementById('con').innerHTML
= img
;
二：代码
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>瀑布流布局
</title>
<link rel="stylesheet" href="css/waterallLayout.css" />
</head>
<body>
<div id="con">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" />
<img src="img/7.jpg" alt="" />
<img src="img/8.jpg" alt="" />
<img src="img/9.jpg" alt="" />
<img src="img/10.jpg" alt="" />
<img src="img/11.jpg" alt="" />
<img src="img/12.jpg" alt="" />
<img src="img/13.jpg" alt="" />
<img src="img/14.jpg" alt="" />
<img src="img/15.jpg" alt="" />
<img src="img/16.jpg" alt="" />
<img src="img/17.jpg" alt="" />
<img src="img/18.jpg" alt="" />
<img src="img/19.jpg" alt="" />
<img src="img/20.jpg" alt="" />
</div>
<script src="js/waterfallLayout.js"></script>
</body>
</html>
css代码：
img{
width:200px
;
background:#bbb
;
position:absolute
;
margin:0px
;
padding:0px
;
}
js代码：
window
.onload = function(){
var divs
= document
.getElementById('con').getElementsByTagName('img');
var mar
= document
.body
.clientWidth
%210/2;
var n
= Math
.floor(document
.body
.clientWidth
/ 210);
var dHeight
=[];
for(var x
=0;x
<divs
.length
;x
++){
divs
[x
].style
.height
= Math
.floor(Math
.random()*250 + 50) + 'px';
var y
= x
%n
;
if(dHeight
.length
== n
){
var min
= findMin(dHeight
);
divs
[x
].style
.left
= mar
+ 5 + 210*min
+ 'px';
divs
[x
].style
.top
= dHeight
[min
] + 10 + 'px';
dHeight
[min
] += divs
[x
].offsetHeight
+ 10;
}else{
dHeight
[y
] = divs
[y
].offsetHeight
+ 10;
divs
[x
].style
.left
= mar
+ 5 + 210*y
+ 'px';
divs
[x
].style
.top
= 10 + divs
[x
].offsetHeight
;
};
};
function findMin(arr
){
var m
= 0;
for(var n
=0;n
< arr
.length
;n
++){
m
= Math
.min(arr
[m
],arr
[n
])==arr
[m
] ? m
:n
;
};
return m
;
};
};
本人还是个noob，如果发现什么问题或者有更好的建议，请在评论中指出，谢谢~~~
