原生js实现瀑布流

最新推荐文章于 2024-07-13 10:22:10 发布

_49609366

最新推荐文章于 2024-07-13 10:22:10 发布

阅读量55

点赞数

文章标签： js html5 javascript

本文链接：https://blog.csdn.net/m0_49609366/article/details/118600301

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            transition: .3s;
        }
        .item {
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            font-weight: 700;
            color: aliceblue;
            margin-right: 15px;
            margin-bottom: 15px;
            width: 205px;
            position: absolute;
            background-color: rgb(206, 169, 169);
            height: 300px;
        }
        .item-1 {
            background-color: rgb(206, 169, 169);
            height: 300px;
        }.item-2 {
            background-color: rgb(131, 226, 174);
            height: 150px;
        }.item-3 {
            background-color: rgb(77, 30, 30);
            height: 350px;
        }.item-4 {
            background-color: rgb(49, 62, 134);
            height: 300px;
        }.item-5 {
            background-color: rgb(230, 99, 99);
            height: 200px;
        }.item-6 {
            background-color: rgb(206, 169, 169);
            height: 300px;
        }.item-7 {
            background-color: rgb(124, 126, 145);
            height: 400px;
        }.item-8 {
            background-color: rgb(169, 199, 38);
            height: 230px;
        }.item-9 {
            background-color: rgb(114, 128, 53);
            height: 300px;
        }.item-10 {
            background-color: rgb(48, 54, 18);
            height: 260px;
        }.item-11 {
            background-color: rgb(118, 122, 96);
            height: 230px;
        }.item-12 {
            background-color: rgb(118, 122, 96);
            height: 240px;
        }.item-13 {
            background-color: rgb(118, 122, 96);
            height: 250px;
        }.item-14 {
            background-color: rgb(118, 122, 96);
            height: 270px;
        }.item-15 {
            background-color: rgb(118, 122, 96);
            height: 330px;
        }.item-16 {
            background-color: rgb(118, 122, 96);
            height: 200px;
        }.item-17 {
            background-color: rgb(118, 122, 96);
            height: 100px;
        }.item-18 {
            background-color: rgb(118, 122, 96);
            height: 400px;
        }.item-19 {
            background-color: rgb(118, 122, 96);
            height: 340px;
        }.item-20 {
            background-color: rgb(118, 122, 96);
            height: 350px;
        }.item-21 {
            background-color: rgb(118, 122, 96);
            height: 360px;
        }.item-22 {
            background-color: rgb(118, 122, 96);
            height: 370px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    let box=document.querySelector("#box")
    let inner=""
    for (let i=0;i<25;i++){
        inner+=` <div class="item item-`+i+`">`+i+`</div>`
    }
    box.innerHTML=inner
    let grap=10
    let items=document.querySelectorAll(".item")
    function waterFall(){
        let pageWidth=getClient().width  //获取屏幕的宽度
        let itemWidth=items[0].offsetWidth //获取元素的宽度
        let cloumns=parseInt(pageWidth/(itemWidth+grap)) //根据元素的宽度和间距，算出列数
        let arr=[]  //定义一个空数组，负责记录每个元素的高度
        items.forEach((ele,index) => {
            if(index<cloumns){  //如果index<列数的话，代表是第一行的
                items[index].style.top=0  
                items[index].style.left=(itemWidth+grap)*index+'px'
                arr.push(items[index].offsetHeight)
            }else{
                let minHeight=arr[0]   //如果不是第一列，就先假设arr的第一项是最低高度
                let itemIndex=0
                // 找出最小高度
                arr.forEach((res,index1)=>{
                    if(minHeight>arr[index1]){
                        minHeight=arr[index1]
                        itemIndex=index1
                    }
                })

                items[index].style.top=arr[itemIndex]+grap+'px'
                items[index].style.left=items[itemIndex].offsetLeft+'px'
                // 重新定义自己的高度，自己的高度+之前的高度+间距
                arr[itemIndex]=arr[itemIndex]+items[index].offsetHeight+grap
            }
        });
    }
    function getClient(){
        return {
            width:window.innerWidth||document.documentElement.clientHeight||document.body.clientWidth,
            height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
        }
    }
    window.onload=function(){
        waterFall()
    }
</script>
</html>

_49609366

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现瀑布流

```bash<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit.
复制链接

扫一扫