<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>瀑布流佈局</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/script.js" ></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="img/0.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/3.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/4.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/5.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/6.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/7.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/8.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/9.jpg"/>
</div>
</div><div class="box">
<div class="pic">
<img src="img/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/12.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/13.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/14.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/15.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/16.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/17.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/18.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/19.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/20.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/21.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/22.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/23.jpg"/>
</div>
</div><div class="box">
<div class="pic">
<img src="img/24.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/25.jpg"/>
</div>
</div><div class="box">
<div class="pic">
<img src="img/26.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/27.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/28.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/29.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/30.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/31.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/32.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/33.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/34.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/35.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/36.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/37.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/38.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/39.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/40.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/41.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/42.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/43.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/44.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/45.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/46.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/47.jpg"/>
</div>
</div>
</div>
</body>
</html>
<pre name="code" class="javascript">window.onload = function(){
waterfall('main','box');
var dataInt = {"data":[{"src":"48.jpg"},{"src":"49.jpg"},{"src":"50.jpg"},{"src":"51.jpg"},{"src":"52.jpg"},{"src":"53.jpg"},{"src":"54.jpg"}]}
window.onscroll = function(){
var oParent = document.getElementById('main');
if(checkscrollside){
//將數據塊渲染到頁面中尾部
for(var i = 0;i<dataInt.data.length;i++){
var oBox = document.createElement('div');
oBox.className = 'box';
oParent.appendChild(oBox);
var oPic = document.createElement('div');
oPic.className = 'pic';
oBox.appendChild(oPic);
var oImg = document.createElement('img');
oImg.src = 'img/'+ dataInt.data[i].src;
oPic.appendChild(oImg);
}
waterfall('main','box');
}
}
}
function waterfall(parent,box){
//取box元素
var oParent = document.getElementById(parent);
// console.log(oParent);
var oBoxs = getByClass(oParent,box);
//計算頁面的列數（頁面寬/box寬）
var oBoxsW = oBoxs[0].offsetWidth;
console.log(oBoxsW);
var cols = Math.floor(document.documentElement.clientWidth/oBoxsW);
console.log(cols);
//設置main的寬度
// oParent.style.cssText = 'width:'+ oBoxsW*cols +'px; margin:0 auto';
var hArr = [];
for(var i = 0;i < oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH = Math.min.apply(null,hArr);
console.log(minH);
var index= hArr.indexOf(minH);
console.log(index);
oBoxs[i].style.position = 'absolute';
oBoxs[i].style.top = minH +'px';
oBoxs[i].style.left = index*oBoxsW + 'px';
hArr[index] +=oBoxs[i].offsetHeight;
}
}
console.log(hArr);
}
//根據class獲取元素
function getByClass(parent,className){
var boxArr = []; //用來存儲class的元素
boxArr= parent.getElementsByClassName(className);
// console.log(boxArr);
return boxArr;
}
//檢測是否具備了滾動加載數據塊的條件
function checkscrollside(){
var oParent = document.getElementById('main');
var oBoxs = getByClass(oParent,'box');
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop + Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2) ;
var scrollTop =document.body.scrollTop || document.documentElement.scrollTop;
var height = document.body.clientHeight || document.documentElement.clientHeight;
if(lastBoxH< (scrollTop + height)){
return true;
}else{
return false;
}
}
*{margin: 0;padding: 0;}
#main{position: relative;}
.box{padding: 15px 0 0 15px; float: left;}
.pic{padding: 10px; border: 1px solid #CCCCCC;border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{width: 165px; height: auto;}
