<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流佈局</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<image src="images/1.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/2.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/3.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/4.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/5.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/6.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/7.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/8.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/9.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/10.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/11.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/12.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/13.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/14.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/15.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/16.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/17.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/18.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/19.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/20.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/21.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/22.jpg"></image>
</div>
</div>
<div class="box">
<div class="pic">
<image src="images/23.jpg"></image>
</div>
</div>
</div>
<script src="js/waterFall.js" type="text/javascript"></script>
</body>
</html>
window.onload = function(){
//調用 waterFall 函數
waterfall("main","box");
// onscroll事件
// 模擬從後臺獲取到的json格式的數據
var dataInt = {
"data":[
{"src":"0.jpg"},
{"src":"1.jpg"},
{"src":"2.jpg"},
{"src":"3.jpg"},
{"src":"4.jpg"},
{"src":"5.jpg"},
{"src":"6.jpg"}
]
}
window.onscroll = function(){
if( checkScrollSlide() ){
var oParent = document.getElementById('main');// 父級對象
for(var i=0;i<dataInt.data.length;i++){
var oBox = document.createElement("div");
oBox.className = 'box';
var oPic = document.createElement("div");
oPic.className = 'pic'
var oImg = document.createElement("img");
oImg.src = 'images/'+ dataInt.data[i].src
oPic.appendChild(oImg);
oBox.appendChild(oPic);
oParent.appendChild(oBox)
}
}
//需要再次調用 waterFall 函數
waterfall("main","box");
}
}
// 封裝 waterFall 函數
function waterfall(parent,box){
// 將mian 下所有的 class爲box的元素 取出來
var oParent = document.getElementById(parent);
// 調用 getByClass 函數
var oBoxs = getByClass(oParent,box)
// 獲取整個頁面顯示的列數
var oBoxW = oBoxs[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
// 設置oParent的寬度
oParent.style.cssText = "width:"+oBoxW*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);//apply改變this指向 獲取數組中的最小值
// 獲取最小值在數組中的索引 以便獲取最小高度的元素據父容器左側的距離
var index = getMinhIndex(hArr,minH);
oBoxs[i].style.position = "absolute";
oBoxs[i].style.top = minH + 'px';
// oBoxs[i].style.left = oBoxW*index + 'px';
oBoxs[i].style.left = oBoxs[index].offsetLeft+ 'px';
hArr[index] += oBoxs[i].offsetHeight;//最後要加上當前新加上去的盒子的高度值
}
}
}
// 封裝 getByClass 函數
function getByClass(parent,clsName){
var boxArr = [],//用來儲存獲取到的所有class 爲 box 的元素
oElements = parent.getElementsByTagName("*");//獲取所有子元素
// 獲取特定className 元素
for(var i=0;i<oElements.length;i++){
if(oElements[i].className == clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}
// 封裝 getMinhIndex 函數 獲取最小值索引
function getMinhIndex(arr,val){
for(var i in arr){
if(arr[i] == val){
return i
}
}
}
//檢測是否具備了滾動加載數據塊的條件
function checkScrollSlide(){
// 首先獲取所有的數據塊 並找到最後一個元素自身的高度的一半和自身距離頂部的距離之和
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 clientHeight = document.body.clientHeight || document.documentElement.clientHeight;//混合模式與標準模式 下兼容
// 判斷最後一個圖片高度的一般是否進入可視區 並返回 一個布爾值
return (scrollTop + clientHeight) > lastBoxH ?true:false;
}
css
*{
margin: 0;
padding:0;
}
#main{
/* width: 1200px;*/
height: auto;
margin: 0 auto;
position: relative;
}
.box{
padding:15px 0 0 15px;
float: left;
}
.pic{
padding:10px;
border:1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width: 165px;
height: auto;
}