瀑布流

来源：互联网发布：java if else嵌套编辑：程序博客网时间：2024/05/01 13:36

整体效果:

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

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>

0 0