js实现瀑布流布局原理代码
实现功能：
1、定义函数 waterfall（parent,box） 实现瀑布流布局。
2、当拖动滚动轴时候，到底部时候会触发 添加元素事件，瀑布流布局。
瀑布流思路：第一排自由排版，记录第一排元素的高度存入数组，之后出现的元素 都会放到 数组高度最小的元素下面，
绝对定位方式（x-上面元素数组内序号*每个元素宽度 y-上面元素的高度），并且每执行一次，会重新定义高度最小的值，
之前高度加上当前元素的高度，存入数组。之后元素都如此执行。
如此每个新增元素都会放置在最小高度元素下面，也就实现瀑布流。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>瀑布流</title>
<style type="text/css">
*{margin: 0; padding: 0;}
#main{
/* width: 1000px;
max-width: 1000px;*/
margin :0 auto;
position: relative;
}
.box{
float: left;
padding: 15px 0 0 15px;
}
.pic{
padding: 15px;
border:1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 5px #ccc;
}
.box img{
width: 200px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="images/1.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/11.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/12.png">
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
waterfall('main','box');
dataImg = {
arr:[
{'src':'images/1.png'},
{'src':'images/2.jpg'},
{'src':'images/3.png'},
{'src':'images/4.png'},
{'src':'images/5.png'},
{'src':'images/6.png'},
{'src':'images/7.png'},
{'src':'images/8.png'},
{'src':'images/9.png'},
{'src':'images/10.png'},
{'src':'images/11.jpg'}
]
}
window.onscroll = function(){
//当滚动到最后一张图片高度一般时刷新新数据
var boxs = getClass('box');
var oneh2 = boxs[boxs.length-1].offsetTop;
var oneh = boxs[boxs.length-1].offsetHeight/2;
var top = document.body.scrollTop || document.documentElement.scrollTop;
var twoh = document.body.clientHeight||document.documentElement.clientHeight;
if(oneh2+oneh<top+twoh){
for(var i=0;i<dataImg.arr.length;i++){
var main = document.getElementById('main');
var cdiv = document.createElement('div');
cdiv.className = 'box';
var cpic = document.createElement('div');
cpic.className = 'pic';
var cimg = document.createElement('img');
cimg.src = dataImg.arr[i].src;
main.appendChild(cdiv);
cdiv.appendChild(cpic);
cpic.appendChild(cimg);
}
}
waterfall('main','box');
}
}
function waterfall(parent,box){
//获取main元素
var oparent = document.getElementById(parent);
//获取所有 box 元素
var obox = getClass('box');
//获取每行能放多少个 居中摆放
var w = document.body.clientWidth||document.documentElement.clientWidth;
//var w =1000;
var oneWidth = obox[0].offsetWidth;
var num = Math.floor(w/oneWidth);
main.style.width = num*oneWidth+'px';
//瀑布流原理 left-下标*图片width top-上面图片高
var hrr = [];
for(var i=0;i<obox.length;i++){
if(i<num){
hrr.push(obox[i].offsetHeight);
}else{
var min = Math.min.apply(null,hrr);
var index = getindex(hrr,min);
obox[i].style.position = 'absolute';
obox[i].style.left = index*oneWidth+'px';
obox[i].style.top = min+'px';
hrr[index] += obox[i].offsetHeight;
}
}
console.log(hrr);
}
//获取 数组内指定值的 序号
function getindex(hrr,h){
for(var i=0;i<hrr.length;i++){
if(hrr[i]==h){
return i;
}
}
}
//统计所有指定class名称的元素
function getClass(a){
var doms = document.getElementsByTagName('*');
var reg = new RegExp('\\b'+a+'\\b');
//var reg = '/^\b'+a+'\b$/';
var arr = [];
for(var i=0;i<doms.length;i++){
if(reg.test(doms[i].className)){
arr.push(doms[i]);
}
}
return arr;
}
</script>
</body>
</html>