window.onload = function() {
waterFlow();
// 准备上拉加载的数据
var dataImage = {
data: [
{ src: "./images/1.jpeg" },
{ src: "./images/2.jpeg" },
{ src: "./images/3.jpeg" },
{ src: "./images/4.jpeg" },
{ src: "./images/5.jpeg" },
{ src: "./images/6.jpeg" },
{ src: "./images/7.jpeg" },
{ src: "./images/8.jpeg" },
{ src: "./images/9.jpeg" },
{ src: "./images/10.jpeg" },
{ src: "./images/11.jpg" },
]
};
window.onscroll = function() {
if (checkReachBottom()) {
console.log("hhh");
var parentContainer = document.querySelector(".container");
for (var i = 0; i < dataImage.data.length; i++) {
var img = document.createElement("img");
img.setAttribute("src", dataImage.data[i].src);
var boximg = document.createElement("div");
boximg.setAttribute("class", "boximg");
boximg.appendChild(img);
var box = document.createElement("div");
box.setAttribute("class", "box");
box.appendChild(boximg);
parentContainer.appendChild(box);
}
// 新加载的数据要添加瀑布流效果
waterFlow();
}
}
};
// 1. 动态设置页面左右居中
function waterFlow() {
// 获取父级容器
var parentContainer = document.querySelector(".container");
// console.log(parentContainer);
//获取所有子元素
var allChild = document.querySelectorAll(".box");
// console.log(allChild);
//获取屏幕宽度
var screenWidth = document.documentElement.clientWidth;
//获取一个图片容器的宽度
var childWidth = allChild[0].offsetWidth;
//计算屏幕水平方向最多能摆放的图片个数
var rowsNum = Math.floor(screenWidth / childWidth) - 1;
// 让左右居中
parentContainer.style.cssText = "width:" + rowsNum * childWidth + "px;margin:0 auto;";
getMinHeightOfCols(allChild, rowsNum);
};
// 2. 动态设置图片位置
function getMinHeightOfCols(allChild, rowsNum) {
//存储每一列的高度
var colsHeightArr = [];
for (var i = 0; i < allChild.length; i++) {
// 判断取出第一行的图片，获取图片对应的高度，放入到数组中
if (i < rowsNum) { //i=6
// 获取当前图片的高度
colsHeightArr[i] = allChild[i].offsetHeight;
} else {
// 获取列高度最小的值
var minHeightOfCols = Math.min.apply(null, colsHeightArr);
// 获取最小值对应的下标
var minHeightOfIndex = colsHeightArr.indexOf(minHeightOfCols);
// 摆放第二张图片的位置
allChild[i].style.position = "absolute";
allChild[i].style.top = minHeightOfCols + "px";
allChild[i].style.left = allChild[minHeightOfIndex].offsetLeft + "px";
// 高度合并
colsHeightArr[minHeightOfIndex] = colsHeightArr[minHeightOfIndex] + allChild[i].offsetHeight;
}
}
};
// 3. 判断页面触底
// 逻辑：滚动高度+视口高度=文档总高度
// 业务：滚动高度+视口高度>文档总高度-100px（或者是最后一张图片的高度）
function checkReachBottom() {
// 获取滚动高度
var scrollHeight = document.documentElement.scrollTop;
// 获取视口高度
var pageHeight = document.documentElement.clientHeight;
// 获取最后一个元素
var allChild = document.querySelectorAll(".box");
var lastChildTop = allChild[allChild.length - 1].offsetTop; //最后一个元素
return lastChildTop < pageHeight + scrollHeight ? true : false;
}老师，为什么我把网页缩小，上拉加载就能成功，网页最大化不行呢？
京公网安备 11011402011233号