JavaScript simply implements waterfall flow-JS Tutorial-php.cn

JavaScript simply implements waterfall flow

韦小宝

Release： 2018-03-09 15:57:49

Original

1285 people have browsed it

Waterfall flow, also known as waterfall flow layout, is a popular website page layout. I believe some students still don’t quite understand or have not understood what waterfall flow is, so let’s go into details today. Let’s talk about how JavaScript implements waterfall flow.

Knowledge points:
1. How to find the minimum value in an array.
The first one is the minimum value by default and is bound to a variable a. Compare other values in the array with this value through a for loop. If the former is smaller, assign it to 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);

Copy after login

2. How to obtain the document coordinates

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

Copy after login

3. Get random integer function

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

Copy after login

4. Waterfall flow code

<!DOCTYPE html>
<html>
<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 p {
            margin-bottom: 20px;
            border: 1px solid red;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <ul id="wrap">
        <li>
        </li>
        <li>    
        </li>
        <li>    
        </li>
    </ul>
    <p style="height: 1000px;">

    </p>
    <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("p");
            newDiv.style.height = rnd(100,200) + "px";
            newDiv.innerHTML = j;
            minList.appendChild(newDiv);//将创建p添加到最新的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>

Copy after login

Waterfall flow is a website page layout with uneven visual performance. A neat multi-column layout that will continuously load data blocks and append them to the current end as the page scroll bar scrolls down. The first website to adopt this layout was Pinterest, which gradually became popular in China. Most domestic fresh websites are basically of this style.

The above is the detailed content of JavaScript simply implements waterfall flow. For more information, please follow other related articles on the PHP Chinese website!