瀑布流

来源：互联网发布：datagridview添加数据编辑：程序博客网时间：2024/05/02 01:58

知识点：
1、如何找到数组中的最小值.
默认第一个为最小值，绑定一个变量a 。通过for循环将数组其它值与该值进行对比，如果前者小则将其赋值给a；

var arr = [3,52,3,2,-2,-1,20];        var min = arr[0];        for (var i = 0; i <  arr.length; i++) {            if (arr[i] < arr[0]) {                min = arr[i];            }        }        alert(min);

2、怎样获取文档坐标

//获取父元素节点var op = ele.parentNode;则ele文档坐标：水平：op.offsetLeft +　op.clientLeft + ele.offsetLeft;             垂直：op.offsetTop +　op.clientTop + ele.offsetTop;

3、获取随机整数函数

function rnd(min,max) {return parseInt(Math.random()*(max - min + 1)) +　min;}

瀑布流代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>瀑布流</title>    <style type="text/css">        * {            padding: 0;            margin: 0;        }        #wrap {            overflow: hidden;            margin-top: 100px;        }        #wrap li {            float: left;            width: 250px;            font-size: 56px;            margin: 0 20px;            list-style-type: none;        }        #wrap li div {            margin-bottom: 20px;            border: 1px solid red;            background-color: #ccc;        }    </style></head><body>    <ul id="wrap">        <li>        </li>        <li>            </li>        <li>            </li>    </ul>    <div style="height: 1000px;">    </div>    <script type="text/javascript">    var wrap = document.getElementById("wrap");    var list = wrap.getElementsByTagName("li");    function rnd(min, max) {        return parseInt(Math.random()*(max - min + 1)) + min;    }    //文档坐标获取    function getPosition(element) {        var oP = element.offsetParent;        var x = element.offsetLeft;        var y = element.offsetTop;        while(oP) {            //水平            x = oP.clientLeft + x + oP.offsetLeft;            //竖直            y = oP.clientTop + y + oP.offsetTop;            oP = oP.offsetParent;        }        return {x:x,y:y}    }    function createDiv() {        for(var j = 0; j < 10; j++) {            //找最小高度的li那一列            var minList = list[0];            for(var i = 0; i < list.length; i++) {                if(minList.offsetHeight > list[i].offsetHeight) {                    minList = list[i];                }            }            var newDiv = document.createElement("div");            newDiv.style.height = rnd(100,200) + "px";            newDiv.innerHTML = j;            minList.appendChild(newDiv);//将创建div添加到最新的li那一列        }    }    createDiv();    //可视区的宽高document.documentElement.clientWidth    //页面滚动条事件    window.onscroll = function() {        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;        //wrap的文档坐标+wrap自身高度 跟滚动条scrollTop+可视区高度比较        if(getPosition(wrap).y + wrap.offsetHeight <= scrollTop + document.documentElement.clientHeight) {            // alert("到底了");            createDiv();        }    }    </script></body></html>

0 0