会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132358个问题
WEB前端全系列/第二阶段:JavaScript编程模块/函数与对象 198楼
WEB前端全系列/第二阶段:JavaScript编程模块/函数与对象 199楼
WEB前端全系列/第二阶段:JavaScript编程模块/DOM模型 204楼
WEB前端全系列/第二阶段:JavaScript编程模块/DOM模型 205楼

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;
}

老师,为什么我把网页缩小,上拉加载就能成功,网页最大化不行呢?

WEB前端全系列/第二阶段:JavaScript编程模块/DOM模型 206楼
WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 207楼
WEB前端全系列/第二阶段:JavaScript编程模块/DOM模型 208楼
WEB前端全系列/第二阶段:JavaScript编程模块/DOM模型 210楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637