用js来写瀑布流

最新推荐文章于 2022-08-25 10:53:35 发布

wuli萍

最新推荐文章于 2022-08-25 10:53:35 发布

阅读量189

点赞数

本文链接：https://blog.csdn.net/wuli_ping/article/details/89886711

版权

本文介绍了如何使用JavaScript实现瀑布流布局，主要包括四个步骤：计算文档宽度和盒子宽度以确定每行数量，设置盒子的CSS定位，根据最小高度确定后续盒子的位置，并在窗口调整时进行自适应。涉及到的技术点包括document.documentElement.clientWidth用于获取窗口宽度，以及利用onresize事件处理窗口尺寸变化。

摘要由CSDN通过智能技术生成

瀑布流思路

1、获取文档宽度和每个盒子宽度（此处取第一个盒子），然后相除获得一行排列盒子的个数，将容器设置为盒子。

2、定位第一行盒子：top为0，left为单个盒子宽度×盒子顺序的下标，将每一列盒子的高度存储在一个数组中。

3、获取第一行盒子高度的最小值（Math.min），然后依次比较确定是第几个盒子，对于顺序大于cnum的盒子，即第一行以后，位置即在第一行最短的盒子之下，定位为absolute，top值为最短盒子的高度，left值和上面的最短盒子一样。

4、然后将盒子高度的数组相应列数的高度值更新，继续排列下一个盒子。

css部分

div{
    width:200px;
    background:#ccc;
    position:absolute;
}
img{
    width:200px;
}

html部分

<body id = "body">
    
</body>

js部分

<script type="text/javascript">
    createDiv()
    function   createDiv(){
        for (var i = 0; i < 50; i++) {
            var aDiv = document.createElement("div");
            var aimg = document.createElement("img");
            var asrc = Math.floor(Math.random()*10+1);
            aimg.src="img/"+asrc+".jpg";
                aDiv.appendChild(aimg); 
                aDiv.style.height = divH+"px";
                body.appendChild(aDiv);
        };
        change();
    }

    function  change(){
        var windowW = document.documentElement.clientWidth; //获取窗口宽度
        var n = Math.floor(windowW/210);  //计算每一行放多少个盒子
            
        var center = (windowW - n*210)/2;  // 所有盒子共用左边距
        var div = document.getElementsByTagName("div");
        var arrh = [];

        for (var i = 0; i < div.length; i++) {
            var j = i%n;     //拿到头一排的下标  方便后面保存第一排的高度
            if(arrh.length ==n ){  //从第二排起开始设置top left
                 var min =   minIndex(arrh);   // 盒子高度最低的下标
                 div[i].style.top = arrh[min]+10+"px";  // 给最低盒子重新定一个新的盒子top值 
                 div[i].style.left = center+210*min+"px";  
                 arrh[min]+=div[i].offsetHeight+10;  //因为低的地方新加了一个盒子  top值发生变化 所以得累加一个新盒子的height；
            }else{
                arrh[j] = div[i].offsetHeight;   //给头一排的div高度保存下来
                div[j].style.top = 0;       //第一排的top值
                div[j].style.left = center+j*210+"px";  //第一排的left值
            }
        };
    }
window.onscroll = function(){
    var windowH = document.documentElement.clientHeight;
    var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
    var documentH = document.documentElement.scrollHeight || document.body.scrollHeight;

    if(windowH+scrollH>documentH-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;
}
window.onload = function(){  //先加载图片  让图片的高度撑起盒子的高度
    change()
}
</script>