JS 图片瀑布流

最新推荐文章于 2023-11-24 12:09:49 发布

jingerh126

最新推荐文章于 2023-11-24 12:09:49 发布

阅读量101

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/jingerh126/article/details/103737219

版权

Web 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0
        }
        .box{
            width:790px;
            margin:auto;
            position:relative;
            border:solid 1px red;
        }
        .small{
            width:70px;
            position:absolute;
        }
        .small_tu{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="box">

</div>
<script>
    var box=document.getElementsByClassName("box")[0];
    var small=document.getElementsByClassName("small");
    var maxH=0;
    //创建并添加图片
    function creat_tu(num){
        for(var i=0;i<num;i++){
            var n=Math.ceil(Math.random()*15);
            var divs=document.createElement("div");
            divs.className="small";
            var tu=document.createElement("img");
            tu.src="img/"+n+".jpg";
            tu.className="small_tu";
            divs.appendChild(tu);
            box.appendChild(divs);
            divs.style.left=i%10*(70+10)+"px";
        }
    }
    creat_tu(70);
    function top_set(chu){
        for(var i=chu;i<small.length;i++) {
            if (i < 10) {
                small[i].style.top = "10px";
            }
            else {
       //small[i - 10].offsetTop 可以用parseInt(small[i - 10].style.top)，top有单位把单位去掉
                var y=small[i - 10].offsetHeight+10+small[i - 10].offsetTop;
                small[i].style.top= y+ "px";
            }
            //设置父容器的高
            var height=small[i].offsetHeight+small[i].offsetTop;
            if(height>maxH) {
                maxH=height;
            }

        }
    }
    function hua(){
        var sh = document.documentElement.scrollHeight;
        var ch = document.documentElement.clientHeight;
        if (this.scrollY + ch >= sh - 10) {
            creat_tu(20);
           top_set(small.length - 20);
        }
    }
    window.onload=function(){
       top_set(0);
        box.style.height=maxH+10+"px";
        window.onscroll=hua;
    }

</script>
</body>