瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，相信有些同学还是并不太懂或者并没有了解过瀑布流是什么，那么我们今天就来详细的讲一下javascript是如何实现瀑布流的吧。
知识点：
1、如何找到数组中的最小值.
默认第一个为最小值，绑定一个变量a 。通过for循环将数组其它值与该值进行对比，如果 前者小则将其赋值给a；
var arr = [3,52,3,2,-2,-1,20];
var min = arr[0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < arr[0]) {
min = arr[i];
}
}
alert(min);
2、怎样获取文档坐标
//获取父元素节点
var op = ele.parentnode;
则ele文档坐标：水平：op.offsetleft + op.clientleft + ele.offsetleft;
垂直：op.offsettop + op.clienttop + ele.offsettop;
3、获取随机整数函数
function rnd(min,max) {
return parseint(math.random()*(max - min + 1)) + min;
}
4、瀑布流代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#wrap {
overflow: hidden;
margin-top: 100px;
}
#wrap li {
float: left;
width: 250px;
font-size: 56px;
margin: 0 20px;
list-style-type: none;
}
#wrap li p {
margin-bottom: 20px;
border: 1px solid red;
background-color: #ccc;
}
</style>
</head>
<body>
<ul id="wrap">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<p style="height: 1000px;">
</p>
<script type="text/javascript">
var wrap = document.getelementbyid("wrap");
var list = wrap.getelementsbytagname("li");
function rnd(min, max) {
return parseint(math.random()*(max - min + 1)) + min;
}
//文档坐标获取
function getposition(element) {
var op = element.offsetparent;
var x = element.offsetleft;
var y = element.offsettop;
while(op) {
//水平
x = op.clientleft + x + op.offsetleft;
//竖直
y = op.clienttop + y + op.offsettop;
op = op.offsetparent;
}
return {x:x,y:y}
}
function creatediv() {
for(var j = 0; j < 10; j++) {
//找最小高度的li那一列
var minlist = list[0];
for(var i = 0; i < list.length; i++) {
if(minlist.offsetheight > list[i].offsetheight) {
minlist = list[i];
}
}
var newdiv = document.createelement("p");
newdiv.style.height = rnd(100,200) + "px";
newdiv.innerhtml = j;
minlist.appendchild(newdiv);//将创建p添加到最新的li那一列
}
}
creatediv();
//可视区的宽高document.documentelement.clientwidth
//页面滚动条事件
window.onscroll = function() {
var scrolltop = document.body.scrolltop || document.documentelement.scrolltop;
//wrap的文档坐标+wrap自身高度 跟滚动条scrolltop+可视区高度比较
if(getposition(wrap).y + wrap.offsetheight <= scrolltop + document.documentelement.clientheight) {
// alert("到底了");
creatediv();
}
}
</script>
</body>
</html>
瀑布流是一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
以上就是javascript简单的实现瀑布流的详细内容。