会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132413个问题
Python 全系列/第二阶段:Python 深入与提高/坦克大战 872楼
Python 全系列/第二阶段:Python 深入与提高/坦克大战 873楼
WEB前端全系列/第十九阶段:Vue3企业级项目/Vue3企业级项目 874楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Spring6 875楼

//动态设置页面左右居中


/**

 * 瀑布流效果:

 * 1.第二行 的图片第一张图片应该放在每列的高度最矮的图片下面

 * 2.

 *

 */



window.onload = function () {

    waterFlow();


    // 准备上拉加载数据

    var dataImage = {

        data: [

            { src: "./imges/9.jpg" },

            { src: "./imges/1.jpg" },

            { src: "./imges/2.jpg" },

            { src: "./imges/3.jpg" },

            { src: "./imges/4.jpg" },

            { src: "./imges/5.jpg" },

            { src: "./imges/6.jpg" },

            { src: "./imges/7.jpg" },

            { src: "./imges/8.jpg" },

            { src: "./imges/10.jpg" },

        ]


    }

    window.onscroll = function () {

        if (checkReachBottom()) {

           

            console.log("触底了");

         

        }

    }


}


function waterFlow() {


    ///获取父级容器

    var parentCotainer = document.getElementById("container");

    //获取所有子元素

    var allChild = document.getElementsByClassName("box");

    //获取屏幕宽度

    var screenwidth = document.documentElement.clientWidth;


    //获取一个图片容器的宽度

    var childWidth = allChild[0].offsetWidth;


    //计算屏幕水平方向最多能摆放的个数

    var rowsNum = Math.floor(screenwidth / childWidth) - 1;


    //居中


    parentCotainer.style.cssText = "width:" + rowsNum * childWidth + "px;margin:0 auto;";


    getMinHeightOfCols(allChild, rowsNum);


}



waterFlow();

//2 .动态图片位置

function getMinHeightOfCols(allChild, rowsNum) {

    //获取 存储 每列的高度

    var colsHeightArr = [];

    for (var i = 0; i < allChild.length; i++) {

        //判断取出第一行图片,并获取高度,放入到数组中

        if (i < rowsNum) {//当i大于最多数时 自动跳到下一行

            //获取当前图片高度

            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.判断页面触底

/*

1. 逻辑 : 滚动高度 +页面可视窗口高度 ;

2. 业务 :滚动高度 +视口高度 > 文档总高度 -  最后一张图片高度

*/


function checkReachBottom() {


    //获取滚动高度

    var scorllHeight = document.documentElement.scrollTop;


    //获取视口高度

    var pageHeight = document.documentElement.clientHeight;


    //文档总高度


    //获取最后一个元素

    var allChild = document.getElementsByClassName("box");

    var lastChildBox = allChild[allChild.length - 1];//最后一个元素

    var lastChildBoxTop = allChild[allChild.length - 1].offsetHeight;//最后一个元素距离顶部高度


    return lastChildBoxTop < pageHeight + scorllHeight ? true : false;

}



老师我这个 设置完后只要滑动就 触发  那个 触底函数了 


WEB前端全系列/第二阶段:JavaScript编程模块/DOM模型 876楼
Python 全系列/第十一阶段:重量级Web框架-Django/Django中级 877楼
Python 全系列/第六阶段:生产环境部署与协同开发/Linux基本命令 879楼
Python 全系列/第十八阶段:数据分析-数据可视化/pyecharts 880楼
人工智能/第五阶段:机器学习-线性回归/梯度下降法 881楼
Python 全系列/第一阶段:Python入门/编程基本概念 882楼
Python 全系列/第一阶段:Python入门/编程基本概念 883楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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