javascript瀑布流完整版。随机颜色;

最新推荐文章于 2025-05-14 09:01:05 发布

pursuePeng

最新推荐文章于 2025-05-14 09:01:05 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wujinpengjiusan/article/details/89638052

本文介绍了一种使用HTML、CSS和JavaScript实现的动态网页布局方法。页面通过生成多个带有随机颜色的div元素，并根据窗口大小自适应排列，提供了一种视觉上吸引人的动态效果。此外，还实现了滚动加载更多元素的功能，增强了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
<style type="text/css">
    div{
        width: 190px;
        position: absolute;
    }
</style>
</head>
<body id="body">
    
</body>
<script type="text/javascript">
function ys(){
    //随机颜色
return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);
}
    createDiv() //调用函数
    function createDiv(){
        for (var i = 0; i < 50; i++) {  //循环创建20个div
            var aDiv = document.createElement("div") //创建div
            var aDivH = Math.floor(Math.random()*300+50) //随机设高
               aDiv.style.height = aDivH+"px" //给随机设高加入div中
               aDiv.style.background = ys()//调用随机颜色函数
            body.appendChild(aDiv) //把div插入body中
      }
      change() //调用函数
    }
    function change(){
        var windowCW = document.documentElement.clientWidth; 
        //获取窗口的宽度
        var n = Math.floor(windowCW/200)//计算没一行可以放几个盒子
        var center = (windowCW - n*200)/2;//左边距距离
        var aDivGet = document.getElementsByTagName("div")
        //调用创建好的div给他赋值 aDivGet
        var arrh = []  //创建一个空的数组
        for (var i = 0; i < aDivGet.length; i++) {
            var j = i%n; //取余排序下标
            if (arrh.length == n) { //判断空数组的长度等于n
                var min = minIndex(arrh)
                aDivGet[i].style.top = arrh[min]+10+"px"
                aDivGet[i].style.left = center+200*min+"px"
                arrh[min]+=aDivGet[i].offsetHeight+10;
            }else{
                aDivGet[j].style.left = center + j*200+"px"
                aDivGet[j].style.top = 0;[i].offsetHeight;
                arrh[j] = aDivGet[i].offsetHeight;
            }
        }
    }
window.onscroll = function(){  //鼠标滚轮事件
    var windowH = document.documentElement.clientHeight; 
    //获取窗口的高度
    var scrollH = document.documentElement.scrollTop || 
    document.body.scrollTop;  //浏览器兼容
    //滚轮于top的距离
    var documentH = document.documentElement.scrollHeight ||
    document.body.scrollHeight;  //浏览器兼容
    //获取窗口的可见高度
    if(windowH+scrollH>documentH-20){  
    //窗口的高度 + 滚轮于top的距离 > 窗口的可见高度-20
        createDiv()  //执行此函数
    }
}
//自适应
window.onresize = function(){
    change()
}
//找数组中高度最短的下标
function minIndex(arr){
    var m = 0;
    for (var i = 0; i < arr.length; i++) {
        m = Math.min(arr[m],arr[i])==arr[m]?m:i
    };
    return m
}
</script>
</html>