JavaScript瀑布流布局效果

最新推荐文章于 2024-07-19 12:58:53 发布

_Wz_

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/qq_45216853/article/details/105595372

版权

瀑布流

根据可视窗口进行变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    // var arr=[1,2,3,4];
    // var min=Math.min.apply(null,arr);
    // console.log(min);

    var width;
    var clientWidth;
    var num=3;
    var list=[];
    var heightList=[];
    const COL=5;
    const GAP=10;
    init();
    function init(){
        document.body.style.margin="0px";
        document.documentElement.style.fontSize="100px";
        var ul=ce("ul",{
            listStyle:"none",
            margin:"0px",
            padding:"0px"
        });
        // screen.width整个屏幕的宽度
        clientWidth=screen.width;
        // 页面的可视宽度-(4个li的左边距)/5个li，得到每个ul(li)的宽度
        width=(clientWidth-(COL-1)*GAP-1)/COL/100;
        for(var i=0;i<COL;i++){
            var li=ce("li",{
                float:"left",
                width:width+"rem ",
                marginLeft:i===0 ? "0px" : GAP/100+"rem"
            });
            // 每个li里面所有内容的高度，初始为0
            heightList.push(0);
            ul.appendChild(li);
            // list数组，存储所有li元素数组
            list.push(li);
        }
        document.body.appendChild(ul);
        loadImage();
        window.addEventListener("resize",resizeHandler);
        
    }

    function loadImage(){
        var img=new Image();
        img.addEventListener("load",loadHandler);
        img.src=`./img/${num}-.jpg`;
    }

    function loadHandler(e){
        this.removeEventListener("load",loadHandler);
        var scale=this.height/this.width;
        var height=scale*width;
        this.style.width=width+"rem";
        this.style.height=height+"rem";
        this.scale=scale;
        var min=Math.min.apply(null,heightList);
        var index=heightList.indexOf(min);
        list[index].appendChild(this);
        heightList[index]+=height;
        if(clientWidth!==document.documentElement.clientWidth){
            clientWidth=document.documentElement.clientWidth;
            resizeHandler();
        }
        num++;
        if(num>79){
            return;
        }
        loadImage();
    }

    function ce(type,style){
        var elem=document.createElement(type);
        Object.assign(elem.style,style);
        return elem;
    }

    function resizeHandler(e){
        var scale=document.documentElement.clientWidth/screen.availWidth;
        document.documentElement.style.fontSize=scale*100+"px";
    }
</script>
</body>
</html>

实现效果展示

在这里插入图片描述

_Wz_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript瀑布流布局效果

瀑布流根据可视窗口进行变化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
复制链接

扫一扫