会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132453个问题
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解(旧) 20102楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Mybatis 20103楼
JAVA 全系列/第八阶段:SpringBoot与MybatisPlus/Spring Boot(旧) 20104楼
WEB前端全系列/第二阶段:JavaScript编程模块/字符串与数组 20106楼
JAVA 全系列/第十一阶段:消息中间件与高并发处理/RabbitMQ 20109楼

html

<!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/通用符.css">
    <script src="js/beixiAjax.js"></script>
    <style>
        .out{
            position: relative;
            margin: 0 auto;
        }
        .in{float: left;}
        img{
            margin: 10px;
            padding: 10px;
            border: 1px solid lightgray;
            border-radius: 15px;
            box-shadow: 0px 0px 5px orange;
        }
    </style>
</head>
<body>
    <div class="out">
        
    </div>
    <script>
        window.onload=function(){
            window.beixiAjax({
                type:'get',
                url:'瀑布流案列.php',
                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 inDiv=document.querySelectorAll('.in');
                        var num=Math.floor(document.documentElement.clientWidth/inDiv[0].offsetWidth);
                // console.log(document.documentElement.clientWidth);
                // console.log(inDiv[0].offsetWidth);
                // console.log(num);
                        outDiv.style.width=num*inDiv[0].offsetWidth+'px';
                        var heightarr=[];
                        for(var i=0;i<inDiv.length;i++){
                            if(i<num){
                        //表示第一行
                                heightarr.push(inDiv[i].offsetHeight);
                            }else{
                        //其余行
                                inDiv[i].style.position='absolute';
                                minheight=Math.min.apply(null,heightarr);
                                minindex=heightarr.indexOf(minheight);
                        //开启定位
                            inDiv[i].style.top=minheight+'px';
                                inDiv[i].style.left=inDiv[minindex].offsetLeft+'px';
                        //将数组中高度累加
                                heightarr[minindex]+=inDiv[i].offsetHeight;
                            }
                        }
                    }
                })
            }
  </script>
</body>
</html>

php

<?php
    $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'];
    echo json_encode($dataarr);
?>

老师,是我的代码有错吗?为什么排版还是有问题?求解:

效果图:

图片.png

WEB前端全系列/第六阶段:Http服务与Ajax模块(旧)/Http服务与Ajax编程 20113楼
Python 全系列/第二阶段:Python 深入与提高/GUI编程(隐藏) 20115楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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