瀑布流图片

最新推荐文章于 2025-05-14 21:07:09 发布
原创最新推荐文章于 2025-05-14 21:07:09 发布 · 243 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#js #javascript
学习专栏收录该内容
10 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            padding: 15px 0 0 15px;
            float: left;

        }

        .pic {
            padding: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 0 2px #ccc;
            border-radius: 5px;
        }

        .pic img {
            width: 165px;
            height: auto;
        }
    </style>
    <script>
        window.onload = function () {
            waterfall('main', 'box');
            //模拟数据
            var data = {
                'data': [{
                    'src': '0.jpg'
                }, {
                    'src': '1.jpg'
                }, {
                    'src': '2.jpg'
                }, {
                    'src': '3.jpg'
                }, {
                    'src': '4.jpg'
                }, {
                    'src': '5.jpg'
                }]
            }
            window.onscroll = function () {
                if (checkScollSlide) {
                    console.log(123546);
                    var oParent = document.getElementById('main');
                    //将数据渲染到页面
                    for (var i = 0; i < data.data.length; i++) {
                        var box = document.createElement('div');
                        box.className = 'box';
                        oParent.appendChild(box);
                        var pic = document.createElement('div');
                        pic.className = 'pic';
                        box.appendChild(pic);
                        var img = document.createElement('img');
                        img.src = "./images/"+data.data[i].src;
                        pic.appendChild(img);
                    }
                    //调用函数，排列图片位置
                    waterfall('main', 'box');
                }
            }
        }

        function waterfall(parent, box) {
            //获取main下的所有calss='box'的元素
            var oParent = document.getElementById(parent);
            //获取class='box'的数量
            var boxs = getByClass(oParent, box);
            //box的宽度
            var boxW = boxs[0].offsetWidth;
            console.log(boxW);

            //屏幕的宽度
            var screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
            //列数
            var cols = Math.floor(screenWidth / boxW);
            //设置main的宽度
            oParent.style.cssText = boxW * cols + 'px;margin:0 auto';
            //声明数组，存放每一列的高度
            var hArr = [];
            for (var i = 0; i < boxs.length; i++) {
                if (i < cols) {
                    hArr.push(boxs[i].offsetHeight);
                } else {
                    //获取列中高度最小的值
                    var minH = Math.min.apply(null, hArr);
                    //获取最小高度所在数组中的索引
                    var index = getMinIndex(hArr, minH);
                    boxs[i].style.position = 'absolute'
                    boxs[i].style.top = minH + 'px';
                    boxs[i].style.left = boxW * index + 'px';
                    hArr[index] += boxs[i].offsetHeight;

                }
            }

        }

        function getByClass(parent, className) {
            var boxArr = new Array();
            //获取所有的子元素

            var oBoxs = parent.getElementsByTagName('*');
            for (var i = 0; i < oBoxs.length; i++) {
                //判断当前的classname是否等于传进来的classname
                if (oBoxs[i].className == className) {
                    boxArr.push(oBoxs[i]);
                }
            }
            return boxArr;
        }
        //获取最小值所在的索引
        function getMinIndex(arr, val) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == val) {
                    return i;
                }
            }
        }
        //判断是否达到加载条件
        function checkScollSlide() {
            var Oparent = document.getElementById('main');
            var boxs = getByClass(oParent, 'box');
            //最后一个box所在列的height加上自身的高的一半
            var lastBoxH = boxs[boxs.length - 1].offsetTop + Math.floor(boxs[boxs.length - 1].offsetHeight / 2);
            //滚动条滚动的高度
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            //可视高度
            var seeHeight = document.body.clientHeight || document.documentElement.clientHeight;
            //滚动条滚动的高度+可视高度
            var thisHeight = scrollTop + seeHeight;
            return lastBoxH < thisHeight ? true : false;

        }
    </script>
</head>

<body style="height:2000px">
    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="./images/0.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/0.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/0.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/0.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/0.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/0.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/3.jpg" alt="">
            </div>
        </div>
    </div>
</body>

</html>