瀑布流思路
2019-07-05 本文已影响0人
刘宏儿
外边一个大框相对定位，里面的div绝对定位
比如有三列，比较三列的高度，在最短的那一列排位，div的宽度都一样，高度是随机数。
效果如图：
1544614350(1).jpg
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瀑布流</title>
<style>
*{
margin: 0;
padding: 0
}
#box{
/* 大盒子固定宽度 */
width: 1200px;
/* 设置相对定位 */
position: relative;
margin: 0 auto;
}
#box div{
/* 设置绝对定位 */
position: absolute;
/* 所有div的值是相等的 */
width: 380px;
margin: 10px;
background-color: #dedede;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script>
//数组用来记录有几列，每一列的top值
var arr = [//H表示top的值，col表示第几列
{
H:0,
col:0
},
{
H:0,
col:1
},
{
H:0,
col:2
}
];
function waterfall() {
//随机数 div的高是随机数
function random(a,b) {//a,b代表a到b的随机数
return Math.floor(Math.random()*(b-a+1))+a;
}
for(var i=0;i<50;i++){//for循环随机产生50个div
//动态的创建div标签
var node = document.createElement("div");
var h = random(300,600);
node.style.height = h+"px";
node.innerHTML="我是图片";
node.style.lineHeight=h+"px";
//比较H的值
arr.sort(function (a,b) {
if(a.H>b.H){
return 1;
}
if(a.H<b.H){
return -1;
}
})
//经过排序之后，数组里的第一个值就是最小的
node.style.left = arr[0].col*400+"px";
node.style.top = arr[0].H+"px";
box.appendChild(node);
arr[0].H+=(h+20);//H叠加的值是下一个div的top值
//计算一下文档的高度，将叠加后的值放到数组的第一个
arr.sort(function (a,b) {
if(a.H<b.H){
return 1;
}
if(a.H>b.H){
return -1;
}
})
box.style.height = arr[0].H+"px";
}
}
waterfall();
window.onscroll = function () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var ch = window.innerHeight || document.body.clientHeight;
if(arr[0].H == scrollTop+ch){
waterfall();
}
}
</script>
</html>
