Rumah > Artikel > hujung hadapan web > JavaScript简单的实现瀑布流

JavaScript简单的实现瀑布流

韦小宝asal: 2018-03-09 15:57:491258semak imbas

瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，相信有些同学还是并不太懂或者并没有了解过瀑布流是什么，那么我们今天就来详细的讲一下JavaScript是如何实现瀑布流的吧。

知识点：
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;
}

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>

瀑布流是一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

Atas ialah kandungan terperinci JavaScript简单的实现瀑布流. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：让页面动起来的WOW.jsArtikel seterusnya：怎样使用gulp自动优化requireJS的项目

Artikel berkaitan

Lihat lagi