原生JS实现瀑布流布局

越陌度阡
发布于 2020-11-26 16:02:16
1.6K0
文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）
分享一个用原生JS实现的瀑布流布局，效果如下：
实现代码如下，欢迎大家复制粘贴。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>原生JS实现瀑布流布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 1152px;
            margin: 0 auto;
        }

        img {
            vertical-align: middle;
            margin-top: 5px;
        }

        ul,
        li {
            list-style: none;
        }

        #box ul {
            padding: 5px;
            border: 1px solid #ccc;
            float: left;
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        var datas = [
            { "src": "images/0.jpg", "height": 288 },
            { "src": "images/1.jpg", "height": 288 },
            { "src": "images/2.jpg", "height": 288 },
            { "src": "images/3.jpg", "height": 129 },
            { "src": "images/4.jpg", "height": 284 },
            { "src": "images/5.jpg", "height": 253 },
            { "src": "images/6.jpg", "height": 245 },
            { "src": "images/7.jpg", "height": 343 },
            { "src": "images/8.jpg", "height": 238 },
            { "src": "images/9.jpg", "height": 159 },
            { "src": "images/10.jpg", "height": 289 },
            { "src": "images/11.jpg", "height": 127 },
            { "src": "images/12.jpg", "height": 282 },
            { "src": "images/13.jpg", "height": 144 },
            { "src": "images/14.jpg", "height": 269 },
            { "src": "images/15.jpg", "height": 282 },
            { "src": "images/16.jpg", "height": 142 },
            { "src": "images/17.jpg", "height": 279 },
            { "src": "images/18.jpg", "height": 289 },
            { "src": "images/19.jpg", "height": 262 },
            { "src": "images/20.jpg", "height": 274 },
            { "src": "images/0.jpg", "height": 288 },
            { "src": "images/1.jpg", "height": 288 },
            { "src": "images/2.jpg", "height": 288 },
            { "src": "images/3.jpg", "height": 129 },
            { "src": "images/4.jpg", "height": 284 },
            { "src": "images/5.jpg", "height": 253 },
            { "src": "images/6.jpg", "height": 245 },
            { "src": "images/7.jpg", "height": 343 },
            { "src": "images/8.jpg", "height": 238 },
            { "src": "images/9.jpg", "height": 159 },
            { "src": "images/10.jpg", "height": 289 },
            { "src": "images/11.jpg", "height": 127 },
            { "src": "images/12.jpg", "height": 282 },
            { "src": "images/13.jpg", "height": 144 },
            { "src": "images/14.jpg", "height": 269 },
            { "src": "images/15.jpg", "height": 282 },
            { "src": "images/16.jpg", "height": 142 },
            { "src": "images/17.jpg", "height": 279 },
            { "src": "images/18.jpg", "height": 289 },
            { "src": "images/19.jpg", "height": 262 },
            { "src": "images/20.jpg", "height": 274 }
        ];


        window.onload = function () {

            // 瀑布流，每次添加图片的时候，找到高度最小的一个数列进行插入
            var box = document.getElementById("box");
            // 第一步，根据图片的宽度确定可以放多少列
            // 根据页面的宽度/图片宽，求出可以放置的列数
            var winWidth = box.offsetWidth - 17;
            // 这个图片可以动态获取
            var picWid = 192;
            // 计算列表个数
            var listCount = Math.floor(winWidth / picWid);

            // 设置一个数组去记录高度
            var heightArr = [];

            // 根据个数创建ul
            for (var i = 0; i < listCount; i++) {
                var ul = document.createElement("ul");
                box.appendChild(ul);
                // 设置heightArr的每一个初始值
                heightArr[i] = ul.offsetHeight;
            }
            // 获取所有ul
            var lists = box.children;

            // 第一次创建图片
            createPic(datas);


            // 页面滚动的时候检测触底
            window.onscroll = function () {
                // 取出页面卷曲高度和可视区域高度
                var scrollTop = myScroll().scrollTop;
                var clientHei = myClient().height;

                // 取出最小的一个列表高
                var minHeight = getMin(heightArr).value;
                console.log(minHeight);
                // 如果scrollTop+clientHei > minHeight ，加载新图片
                if (scrollTop + clientHei > minHeight) {
                    createPic(datas);
                }
            };


            function createPic(datas) {
                // 根据datas对象的个数创建li

                for (var i = 0; i < datas.length; i++) {
                    var li = document.createElement("li");
                    li.innerHTML = '<img src="' + datas[i].src + '" alt="">';

                    // 取出高度的最小值
                    var minIndex = getMin(heightArr).index;

                    // 使用这个索引值去lists中取出某一个ul
                    lists[minIndex].appendChild(li);

                    // 更新heightArr中每个ul的高度
                    // li.style.height = datas[minIndex].height + "px";
                    // 由于图片有加载时间，我们可以从服务器先接回图片信息
                    // 但是我们没有服务器，可以在datas中添加当前图片的信息，在这里进行获取
                    // heightArr[minIndex] += datas[minIndex].height;
                    // heightArr[minIndex] = lists[minIndex].offsetHeight;
                    // console.log(heightArr);
                    heightArr[minIndex] += datas[i].height;

                }
            }
        }


        //计算数组最小值
        function getMin(arr) {
            var minValue = arr[0];
            var minIndex = 0;
            for (var i = 0; i < arr.length; i++) {
                if (minValue > arr[i]) {
                    minValue = arr[i];
                    minIndex = i;
                }
            }
            return {
                index: minIndex,
                value: minValue
            };
        };

        function myClient() {
            return {
                width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
                height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
            }
        };

        function myScroll() {
            return {
                scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
                scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
            };
        }
    </script>
</body>

</html>
本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/08/10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
原生JS实现瀑布流布局

原生JS实现瀑布流布局

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐
