js之瀑布流的實現
阿新 • • 發佈：2018-08-14
cti 新的 info orm charset 遍歷 appdata cli ref .gif)
index.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.onload_circle {
position: fixed;
top: 50%;
left: 50%;
margin-top: -26px;
margin-left: -26px;
width: 50px;
height: 50px;
border: 1px solid orange;
border-radius: 50%;
transform-origin: center center;
animation: rotate 1s infinite linear;
transition: all 1s;
}
.ball {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
left: -3px;
top: 23px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body style="">
<div class="onload_circle">
<span class="ball"></span>
</div>
</body>
</html>
data.js文件
const data = [
{
url: ‘images/1.jpg‘,
width: 432,
height: 300,
},
{
url: ‘images/2.jpg‘,
width: 681,
height: 966,
},
{
url: ‘images/3.jpg‘,
width: 480,
height: 300,
},
{
url: ‘images/4.jpg‘,
width: 480,
height: 300,
},
{
url: ‘images/5.jpg‘,
width: 683,
height: 1024,
},
{
url: ‘images/6.jpg‘,
width: 682,
height: 1024,
},
{
url: ‘images/7.jpg‘,
width: 1000,
height: 1500,
},{
url: ‘images/8.jpg‘,
width: 677,
height: 966,
},{
url: ‘images/9.jpg‘,
width: 667,
height: 1000,
},{
url: ‘images/10.jpg‘,
width: 400,
height: 300,
}
];
上js文件中的圖片路徑更改成自己需要的路徑即可。
index.js文件
window.onload = function () {
let oBox = document.getElementById(‘box‘);
let aPanel = Array.from(oBox.children);
const iPanelW = aPanel[0].offsetWidth; // 記錄列的寬度
const iImgW = 220;
// 計算最多容納列數
let iWinW = document.documentElement.clientWidth;
let iWinH = document.documentElement.clientHeight;
let iMaxCol = Math.floor(iWinW / iPanelW);
// 指定box的寬度
oBox.style.width = iMaxCol * iPanelW + ‘px‘;
// 記錄每一列的高度
let aColH = [];
// 遍歷指定位置
aPanel.forEach((v, k) => {
// 如果當前panel為第一排，則top為0
if(k < iMaxCol) {
v.style.top = 0;
v.style.left = k * iPanelW + ‘px‘;
// 記錄每一列的高度
aColH.push(v.offsetHeight);
} else {
// 尋找最矮列的高度值和下標
var iMinH = Math.min(...aColH);
var iMinK = aColH.indexOf(iMinH);
// 指定位置
v.style.left = iMinK * iPanelW + ‘px‘;
v.style.top = iMinH + ‘px‘;
// 更新列的高度
aColH[iMinK] += v.offsetHeight;
}
});
// 滾動加載新的數據
var loadOK = true; // 可以加載新的數據
window.onscroll = function () {
let iScrollT = document.body.scrollTop || document.documentElement.scrollTop;
let oLastPanel = aPanel[aPanel.length - 1];
if(loadOK && (iWinH + iScrollT > oLastPanel.offsetTop + oLastPanel.offsetHeight / 2)) {
loadOK = false;
// 加載新的數據
data.forEach(v => {
let oNewPanel = document.createElement(‘div‘);
oNewPanel.className = ‘panel‘;
// 創建IMG
let oNewImg = document.createElement(‘img‘);
oNewImg.src = v.url;
// 計算圖片等比縮放後實際的高度
// 公式：iActualW / iActualH = iScaleW / iScaleH
let iImgH = v.height * iImgW / v.width;
oNewImg.style.height = iMinH + ‘px‘;
oNewPanel.appendChild(oNewImg);
oBox.appendChild(oNewPanel);
// 尋找最矮列的高度值和下標
var iMinH = Math.min(...aColH);
var iMinK = aColH.indexOf(iMinH);
oNewPanel.style.left = iMinK * iPanelW + ‘px‘;
oNewPanel.style.top = iMinH + ‘px‘;
// 更新列的高度
aColH[iMinK] += oNewPanel.offsetHeight;
});
// 更新最後的列
aPanel = Array.from(oBox.children);
// 打開開關
loadOK = true;
}
};
window.onresize = function () {
// 更新視窗的寬度和高度
iWinW = document.documentElement.clientWidth;
iWinH = document.documentElement.clientHeight;
// 更新列數
iMaxCol = Math.floor(iWinW / iPanelW);
// 更新box的寬度
oBox.style.width = iMaxCol * iPanelW + ‘px‘;
// 重新排版
aColH = [];
// 遍歷指定位置
aPanel.forEach((v, k) => {
// 如果當前panel為第一排，則top為0
if(k < iMaxCol) {
v.style.top = 0;
v.style.left = k * iPanelW + ‘px‘;
// 記錄每一列的高度
aColH.push(v.offsetHeight);
} else {
// 尋找最矮列的高度值和下標
var iMinH = Math.min(...aColH);
var iMinK = aColH.indexOf(iMinH);
// 指定位置
v.style.left = iMinK * iPanelW + ‘px‘;
v.style.top = iMinH + ‘px‘;
// 更新列的高度
aColH[iMinK] += v.offsetHeight;
}
});
};
};
js之瀑布流的實現