基於原生javascript的瀑布流網頁佈局模型
瀑布流特點： 信息塊寬度相同，高度不同 根據滑輪滾動 實現信息塊的不斷加載。
基本思路 ： 動態設定當前頁面的信息塊列數i，並設置第i+1個的位置爲前i個高度最小的信息塊下面 ，並循環調用，以實正常佈局。設定頁面默認加載20個數據塊，判斷是否需要加載數據塊的條件是：當前頁面最後一個數據塊距離頁面頂部的高度小於頁面滾動距離加頁面高度每次新增一批數據塊後都需要再次調用排版函數實現排版顯示
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="stylesheet/waterfall.css">
<script type="text/javascript" src="javaScript/waterfall.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="pic">
<img src="images/1.png" alt="not found">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.png" alt="not found">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.png" alt="not found">
</div>
</div>
.
.
.
.
<div class="box">
<div class="pic">
<img src="images/20.png" alt="not found">
</div>
</div>
</div>
</body>
</html>waterfall.css
*{
margin: 0px;
padding: 0px;
}
#container{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
border: 1px solid #cccccc;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
height: auto;
width: 165px;
}waterfall.js
/**
* Created by laxse on 2016/10/11.
*/
window.onload = function () {
waterFall('container', 'box');
//模擬後臺數據json
var data ={"data":[{"src":'0.jpg'},{"src":'0.jpg'},{"src":'0.jpg'},{"src":'0.jpg'},{"src":'0.jpg'}]}
window.onscroll = function () {
if(checkIfLoading){
var container = document.getElementById('container')
//將數據塊渲染到頁面底部
for(var i =0;i<data.data.length;i++){
var createBoxDiv1 = document.createElement('div');
createBoxDiv1.className='box';
container.appendChild(createBoxDiv1);
var createBoxDiv2 = document.createElement('div');
createBoxDiv2.className='pic';
createBoxDiv1.appendChild(createBoxDiv2);
var createImg = document.createElement('img');
createImg.src="images/"+data.data[i].src;
createBoxDiv2.appendChild(createImg);
}
waterFall('container', 'box');
}
}
}
function waterFall(parent, box) {
var objectParent = document.getElementById(parent);
console.log(objectParent);
var boxArray = document.getElementsByClassName(box);
console.log(boxArray.length);
//獲取列數 = 頁面寬/盒子寬 （動態）
var objectBoxWidth = boxArray[0].offsetWidth; //圖片寬度+內邊距*2+邊框*2+15padding
console.log(objectBoxWidth);
var columnNumber = Math.floor(document.documentElement.clientWidth / objectBoxWidth);
console.log(columnNumber);
//設置container寬度 用來實現 列數固定且內容居中
objectParent.style.cssText = 'width:' + objectBoxWidth * columnNumber + 'px;margin:0 auto;'
var heightArray = []; //存放每一列圖片高度
for (var i = 0; i < boxArray.length; i++) {
if (i < columnNumber) {
heightArray.push(boxArray[i].offsetHeight);
} else {
var minHeight = Math.min.apply(null, heightArray); //獲取最小高度
console.log(minHeight);
//獲取最小高度索引
var minIndex = getMinIndex(heightArray,minHeight);
console.log(minIndex);
boxArray[i].style.position='absolute';
boxArray[i].style.top=minHeight+'px';
boxArray[i].style.left=objectBoxWidth*minIndex+'px';
/* 設置left的兩種方法
boxArray[i].style.left=boxArray[minIndex].offsetLeft+'px';
*/
//設置min下面的box位置後改變數組值
heightArray[minIndex]+=boxArray[i].offsetHeight;
}
}
console.log(heightArray);
}
function getMinIndex(array, value) {
for(var i in array){
if (array[i]==value){
return i;
}
}
}
//是否加載數據快
function checkIfLoading() {
var boxArray = document.getElementsByClassName('box');
var lastBoxHeight = boxArray[boxArray.length-1].offsetTop+Math.floor(boxArray[boxArray.length-1].offsetHeight/2);
console.log(lastBoxHeight);
var scrollTop = document.body.scrollTop ||document.documentElement.scrollTop;
console.log(scrollTop);
var screenHeight = document.body.clientHeight ||document.documentElement.clientHeight;
console.log(screenHeight);
return (lastBoxHeight<scrollTop+screenHeight)?true:false;
}