会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132360个问题
Python 全系列/第四阶段:函数式编程和核心特性/函数式编程核心(高阶函数、闭包等) 38479楼
WEB前端全系列/第二阶段:JavaScript编程模块/编程风格 38480楼
Python 全系列/第二阶段:Python 深入与提高/模块 38481楼
Python 全系列/第一阶段:Python入门/序列 38484楼

image.pngimage.pngimage.png

Python 全系列/第一阶段:Python入门/控制语句 38485楼
Python 全系列/第五阶段:数据库编程/项目-音乐播放器-旧 38487楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流案例</title>
    <link rel="stylesheet" href="../css/initialize.css">
    <script src="../js/beixiAjaxBaseUtil.js"></script>
    <style>
        .out{
            position: relative;margin: 0 auto;
        }
        .in{
            float: left;
        }
        img{margin: 10px;
            border: 1px solid lightgray;padding: 10px;
            border-radius: 15px;
            box-shadow: 0px 0px 5px orange;
        }
    </style>
</head>
<body>
    <div class="out"></div>
    <script>
        window.beixiAjax({
         type:"get",
         url:'http://localhost:8088/test/test1.do',
        success:function(res){
         var dataArr = res;
        //准备页面元素
        var outDiv = document.querySelector('.out');
        //当数据准备完毕后,先将数据加载到页面
        for(var i=0;i<dataArr.length;i++){
            var div =document.createElement('div');
            div.className='in';
            div.innerHTML='<img src="'+dataArr[i]+'">';
            outDiv.appendChild(div);
            var indivs=document.querySelectorAll('.in');
            var num=Math.floor(document.documentElement.clientWidth/indivs[0].offsetWidth);
            console.log(indivs[0].offsetWidth);
            outDiv.style.width=num*indivs[0].offsetWidth+'px';
            var heightArr=[];
            //存放第一行图片的高度
            //所有的div除了第一行,都要定位
            for(var i=0;i<indivs.length;i++){
                if(i<num){
                    //第一行
                    heightArr.push(indivs[i].offsetHeight);
                    // console.log(indivs[0].offsetHeight);
                }else{
                    //其他行
                    indivs[i].style.position='absolute';
                    minHeight=Math.min.apply(null,heightArr);
                    minIndex=heightArr.indexOf(minHeight);
                    //开启定位
                    indivs[i].style.top=minHeight+'px';
                    indivs[i].style.left=indivs[minIndex].offsetLeft+'px';
                    heightArr[minIndex]+=indivs[i].offsetHeight;
                }
            }
        }
            }
        });


        //这个数组模拟ajax请求来的后台数据
        // var dataArr =['img/i1.jpg','img/i2.jpg','img/i3.jpg','img/i4.jpg','img/i5.jpg','img/i6.jpg','img/i7.jpg','img/i8.jpg','img/i9.jpg','img/i10.jpg','img/i11.jpg','img/i12.jpg','img/i13.jpg','img/i14.jpg','img/i15.jpg'];
       
        //构建瀑布流
        // window.onload=function(){
            
        // }
    </script>
</body>
</html>

image.png

image.png


单独跑可以跑通,放服务器上,图片的宽度一直返回42,拿了老师的代码 结果也是一样

WEB前端全系列/第六阶段:Http服务与Ajax模块(旧)/Http服务与Ajax编程 38489楼
Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 38490楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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