会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132776个问题
Python 全系列/第一阶段:Python入门/编程基本概念 11672楼
WEB前端全系列/第五阶段:前后端交互/网络请求AJAX 11675楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Mybatis 11676楼
WEB前端全系列/第二十阶段:Vue2企业级项目(旧)/疫情动态实时播报 11678楼
WEB前端全系列/第二十阶段:Vue2企业级项目(旧)/疫情动态实时播报 11679楼
Python 全系列/第七阶段:网页编程基础/浮动与定位 11680楼
WEB前端全系列/第二十阶段:Vue2企业级项目(旧)/疫情动态实时播报 11681楼
Python 全系列/第七阶段:网页编程基础/浮动与定位 11682楼
Python 全系列/第八阶段:轻量级Web开发利器-Flask框架/Flask高级 11683楼
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解 11684楼

/**
 * 瀑布流效果:
 *      1.第二行的第一张图片,应该放在每列的高度最矮的图片下面
 * 
 */

window.onload=function(){
    waterFlow()
}

//1.动态设置页面居中

function waterFlow(){
    //获取父级容器
    var parenterContainer =document.getElementById('container');
    //获取所有子元素
    var allChild=document.querySelectorAll('.box');
    //获取屏幕的宽度
    var screenWidth=document.documentElement.clientWidth;
    //获取一个图片容器的宽度
    var childWidth =allChild[0].offsetWidth;
    //计算屏幕水平方向最多能摆放的图片个数
    var rowsNum=Math.floor(screenWidth/childWidth)-1;
    //让页面左右居中
    parenterContainer.style.cssText='width:'+childWidth*rowsNum+'px;margin:0 auto;'

    getMinHeightOfCols(allChild,rowsNum)
}

//2.动态设置图片位置

function getMinHeightOfCols(allChild,rowsNum){
    //存储每列的高度
    var colsHeightArr=[];
    for(var i=0;i<allChild.lenght;i++){
        //判断取出第一行的图片,获取图片对应的高度,放入到数组中
        if(i<rowsNum){
            //获取当前图片的高度
            colsHeightArr[i]=allChild[i].offsetHeight;
        }else{
            //获取列高度最小的值
            var minHeightOfCols=Math.min.apply(null,colsHeightArr)
            console.log(minHeightOfCols);
            //获取最小值对应的下标(位置)
            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
        }
    }
    console.log(colsHeightArr);
}

为什么连列表都放不进去啊,代码有什么问题吗

Python 全系列/第七阶段:网页编程基础/DOM模型 11685楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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