瀑布流

最新推荐文章于 2024-03-08 15:38:19 发布

Anna_ll

最新推荐文章于 2024-03-08 15:38:19 发布

阅读量548

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Anna_ll/article/details/52453379

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

整体效果:

随着浏览器的宽度变小每次随着列数改变方块的位置改变,但不会有空隙.

1.整体给一个容器用来装所有的内容,整体容器始终在屏幕居中
2.每一列的高度是随机的分配的,(不固定).
3.不论怎样变化块与块之间的间距是不变的,同时距离左边整体有固定的距离
4.根据整体宽度,求出随着宽度的改变每一行的块数是多少,因为每一小块的宽度是固定的
5.根据没一小块的宽度求出整体容器的宽度,(有了宽度才可以使整体居中)
6.给定每一列的初始高度(创建一个保存列高度的数组)
7.给定块的个数(将个数作为参数)
8.一个一个创建每个小块
9.将保存小块的数组给定下标
10.随机生成高度并依次添加到保存高度的数组上
11.为了使空间不浪费,依次寻找每一行中的最短列
12.将元素依次加入
13.求出元素距左边的距离,和距上边的距离将元素定位到指定位置
14.每填完一个元素更新最小值列
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #flow{
                list-style: none;
                position: relative;
                margin: 0 auto;

            }
            #flow li{
                width: 200px;
                background-color: lightpink;
                position: absolute;
                font-size: 50px;
                transition: 1s;
            }
        </style>
    </head>
    <body>
        <ul id="flow">
        </ul>


        <script type="text/javascript">
            //随机高度的函数
            function randH (min,max) {
                return parseInt(Math.random()*(max-min+1)+min);
            }
            var ul = document.getElementById("flow");
            var leftSpace = 10;//左间距
            var paddingSpace = 10;//li间距
            var hs = [];
            function layout (bol) {
                var lis = document.getElementsByTagName("li");
                //列数
                var cols = parseInt(document.documentElement.clientWidth/200);
                //大水杯(ul)的宽度
                ul.style.width = cols*200+paddingSpace*(cols-1)+leftSpace+"px";
                //保存列高度的数组
                var arrH = [];
                for (var i = 0;i < cols;i++) {
                    arrH[i] = 10;//每一列的初始高度
                }
                function creatLi (index) {
                    var li = lis[index] || document.createElement("li");
                    //将下标赋给li
                    li.innerHTML = index;
                    //随机生成高度
                    var h = hs[index] || randH(100,300);
                    li.style.height = h + "px";
                    if (bol) {
                        //往高度数组添高度
                        hs.push(h);
                    }
                    //找最短列
                    var minl = 0;//最短列的列号
                    var minH = arrH[0];//最短列的高度
                    for (var i = 0;i < arrH.length;i++) {
                        if (minH > arrH[i]) {
                            minH = arrH[i];
                            minl = i;
                        }
                    }
                    //求left值
                    var l = leftSpace + (200+paddingSpace)*minl;
                    li.style.left = l + "px";
                    //求top值
                    var t = arrH[minl] + paddingSpace;
                    li.style.top = t + "px";

                    bol && ul.appendChild(li);
                    //更新最小值列
                    arrH[minl] = arrH[minl] + li.offsetHeight + paddingSpace;
                }
                //循环创建li
                for (var i=0;i<30;i++) {
                    creatLi(i);
                }
            }


            layout(true);window.onresize = function () {
                layout(false);
            }


        </script>

    </body>
</html>

Anna_ll

关注

0
点赞
踩
1

收藏

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

整体效果:随着浏览器的宽度变小每次随着列数改变方块的位置改变,但不会有空隙.1.整体给一个容器用来装所有的内容,整体容器始终在屏幕居中 2.每一列的高度是随机的分配的,(不固定). 3.不论怎样变化块与块之间的间距是不变的,同时距离左边整体有固定的距离 4.根据整体宽度,求出随着宽度的改变每一行的块数是多少,因为每一小块的宽度是固定的 5.根据没一小块的宽
复制链接

扫一扫