用js来写瀑布流

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

wuli萍

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

阅读量153

点赞数

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

版权

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

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

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

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

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

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

<script type="text/javascript">
    createDiv()
    function   createDiv(){
        for (var i = 0; i < 50; i++) {
            var aDiv =

关注