会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132413个问题
WEB前端全系列/第二十阶段:Vue2企业级项目(旧)/疫情动态实时播报 11642楼
WEB前端全系列/第二十阶段:Vue2企业级项目(旧)/疫情动态实时播报 11643楼
Python 全系列/第七阶段:网页编程基础/浮动与定位 11644楼
WEB前端全系列/第二十阶段:Vue2企业级项目(旧)/疫情动态实时播报 11645楼
Python 全系列/第七阶段:网页编程基础/浮动与定位 11646楼
Python 全系列/第八阶段:轻量级Web开发利器-Flask框架/Flask高级 11647楼
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解 11648楼

/**
 * 瀑布流效果:
 *      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模型 11649楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Mybatis 11650楼
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解 11651楼
JAVA 全系列/第十八阶段:亿级高并发电商项目_架构/编码(旧)/电商:基于SpringSecurity实现后台登录功能 11652楼
Python 全系列/第二阶段:Python 深入与提高/文件处理 11653楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/容器(旧) 11654楼

后端.rar

错误.jpg

vue_shop.rar

老师这个怎么解决啊

Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 11655楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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