ホームページ > 記事 > ウェブフロントエンド > JavaScript はウォーターフォールフローを実装するだけです

JavaScript はウォーターフォールフローを実装するだけです

韦小宝オリジナル: 2018-03-09 15:57:491258ブラウズ

ウォーターフォールフロー (ウォーターフォールフローレイアウトとも呼ばれます) は、人気のある Web サイトのページレイアウトです。学生の中には、ウォーターフォールフローが何であるかをまだよく理解していない、または理解していない人もいると思います。そこで、今日は JavaScript の実現方法について詳しく説明します。滝の流れ。

知識ポイント:
1. 配列内の最小値を見つける方法最初の値はデフォルトで最小値であり、変数 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

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

4 、ウォーターフォールフローコード

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

ウォーターフォールフローは Web サイトのページレイアウトであり、ギザギザの複数列レイアウトとして視覚的に表現されます。ページスクロールバーが下にスクロールすると、このレイアウトはデータを読み込み続けます。ブロックを作成し、現在の末尾に追加します。このレイアウトを最初に採用した Web サイトは Pinterest で、中国で徐々に人気が高まりました。国内のフレッシュサイトは基本的にこのスタイルが多いです。

以上がJavaScript はウォーターフォールフローを実装するだけですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ページを動かすWOW.js次の記事：ページを動かすWOW.js

続きを見る

JavaScript はウォーターフォール フローを実装するだけです

関連記事

JavaScript はウォーターフォールフローを実装するだけです