Heim > Artikel > Web-Frontend > JavaScript implementiert einfach den Wasserfallfluss

JavaScript implementiert einfach den Wasserfallfluss

韦小宝Original: 2018-03-09 15:57:491216Durchsuche

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

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;

4. Wasserfallcode

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

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：WOW.js, das die Seite bewegtNächster Artikel：WOW.js, das die Seite bewegt

In Verbindung stehende Artikel

Mehr sehen