JavaScript implementiert einfach den Wasserfallfluss-js-Tutorial-php.cn

JavaScript implementiert einfach den Wasserfallfluss

韦小宝

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

Original

1295 Leute haben es durchsucht

Wasserfallfluss, auch Wasserfallfluss-Layout genannt, ist ein beliebtes Website-Seitenlayout. Ich glaube, dass einige Schüler noch nicht ganz verstehen oder nicht verstanden haben, was Wasserfallfluss ist. Lassen Sie uns heute auf die Details eingehen darüber, wie JavaScript den Wasserfallfluss implementiert.

Wissenspunkte:
1. So finden Sie den Mindestwert in einem Array
Der erste ist standardmäßig der Mindestwert und an eine Variable a gebunden. Vergleichen Sie andere Werte im Array mit einer for-Schleife. Wenn ersterer kleiner ist, weisen Sie ihn a zu

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);

Nach dem Login kopieren

3. Holen Sie sich eine zufällige Ganzzahlfunktion

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

Nach dem Login kopieren

4. Wasserfallcode

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

Nach dem Login kopieren

Wasserfall ist eine Art Website. Das Seitenlayout wird visuell durch ein gezacktes mehrspaltiges Layout dargestellt. Wenn die Bildlaufleiste der Seite nach unten scrollt, lädt dieses Layout kontinuierlich Datenblöcke und hängt sie an das aktuelle Ende an. Die erste Website, die dieses Layout übernahm, war Pinterest, das in China nach und nach populär wurde. Die meisten inländischen Fresh-Websites sind grundsätzlich von diesem Stil.

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonJavaScript implementiert einfach den Wasserfallfluss. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!