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>