时间戳

首页 > 技术文章 > javascript瀑布流代码

javascript瀑布流代码

lsy0403 2016-09-21 14:56 原文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            float: left;
            border: 1px solid #ccc;
            padding: 5px;
        }
    </style>
</head>
<body>
<div id="container">
    <!--(.box>img[src="images/P_00$.jpg"])*9-->
    <div class="box"><img src="images/P_000.jpg" alt=""/></div>
    <div class="box"><img src="images/P_001.jpg" alt=""/></div>
    <div class="box"><img src="images/P_002.jpg" alt=""/></div>
    <div class="box"><img src="images/P_003.jpg" alt=""/></div>
    <div class="box"><img src="images/P_004.jpg" alt=""/></div>
    <div class="box"><img src="images/P_005.jpg" alt=""/></div>
    <div class="box"><img src="images/P_006.jpg" alt=""/></div>
    <div class="box"><img src="images/P_007.jpg" alt=""/></div>
    <div class="box"><img src="images/P_008.jpg" alt=""/></div>
    <div class="box"><img src="images/P_009.jpg" alt=""/></div>
    <div class="box"><img src="images/P_010.jpg" alt=""/></div>
    <div class="box"><img src="images/P_011.jpg" alt=""/></div>
    <div class="box"><img src="images/P_012.jpg" alt=""/></div>
    <div class="box"><img src="images/P_013.jpg" alt=""/></div>
    <div class="box"><img src="images/P_014.jpg" alt=""/></div>
    <div class="box"><img src="images/P_015.jpg" alt=""/></div>
    <div class="box"><img src="images/P_016.jpg" alt=""/></div>
    <div class="box"><img src="images/P_017.jpg" alt=""/></div>
    <div class="box"><img src="images/P_018.jpg" alt=""/></div>
    <div class="box"><img src="images/P_019.jpg" alt=""/></div>
    <div class="box"><img src="images/P_000.jpg" alt=""/></div>
    <div class="box"><img src="images/P_001.jpg" alt=""/></div>
    <div class="box"><img src="images/P_002.jpg" alt=""/></div>
    <div class="box"><img src="images/P_003.jpg" alt=""/></div>
    <div class="box"><img src="images/P_004.jpg" alt=""/></div>
    <div class="box"><img src="images/P_005.jpg" alt=""/></div>
    <div class="box"><img src="images/P_006.jpg" alt=""/></div>
    <div class="box"><img src="images/P_007.jpg" alt=""/></div>
    <div class="box"><img src="images/P_008.jpg" alt=""/></div>
    <div class="box"><img src="images/P_009.jpg" alt=""/></div>
    <div class="box"><img src="images/P_010.jpg" alt=""/></div>
    <div class="box"><img src="images/P_011.jpg" alt=""/></div>
    <div class="box"><img src="images/P_012.jpg" alt=""/></div>
    <div class="box"><img src="images/P_013.jpg" alt=""/></div>
    <div class="box"><img src="images/P_014.jpg" alt=""/></div>
    <div class="box"><img src="images/P_015.jpg" alt=""/></div>
    <div class="box"><img src="images/P_016.jpg" alt=""/></div>
    <div class="box"><img src="images/P_017.jpg" alt=""/></div>
    <div class="box"><img src="images/P_018.jpg" alt=""/></div>
    <div class="box"><img src="images/P_019.jpg" alt=""/></div>
</div>
<script>
    //因为涉及到了图片宽高 所以要写在window.onload里面

    //第一行是通过左浮动 自然摆放
    //后面是通过JS计算 高度最小的那一行 然后把图片放到那个位置
    window.onload = function () {
        //找人
        var container = document.getElementById("container");
        var boxes = container.children;//所有的盒子
        //1.找出谁是第一行
        //计算第一行有多少张 或者也就是 页面上有多少列
        //一行有多少张实际上 就是    页面的宽度 / 盒子的宽度
        //页面宽度
        var pageWidth = window.innerWidth;
        //盒子的宽度
        var boxWidth = boxes[0].offsetWidth;
        var column = Math.floor(pageWidth / boxWidth);//都是整数 所以要向下取整
        //console.log(column);
        //2.用一个数组保存 每一列的高度 找出最小值 和最小值的索引
        var arrHeight = [];
        //把每一列的初始高度 保存到数组中
        function waterfall() {
            //找出所有的盒子并处理
            for (var i = 0; i < boxes.length; i++) {
                //先只找出第一行的所有的盒子
                if (i < column) {
                    //boxes[i]//第一行的盒子
                    //把第一行的盒子的高度放到数组中
                    arrHeight[i] = boxes[i].offsetHeight;
                } else {
                    //第一行盒子之后的盒子
                    //根据 保存每行高度的数组中的 最小值去摆放
                    var minHeight = getMin(arrHeight).value;//最小的高度
                    var minHeightIndex = getMin(arrHeight).index;//高度最小的那一列
                    //摆放盒子其实就是设置盒子的top和left
                    //要想设置位置 先要加定位
                    boxes[i].style.position = "absolute";
                    //设置top值 top值就是高度最小的那一列现在的高度
                    boxes[i].style.top = minHeight + "px";
                    //设置left值 left值就是 高度最小的那一列所有图片的offsetLeft
                    //其中第一行的最好找
                    boxes[i].style.left = boxes[minHeightIndex].offsetLeft + "px";
                    //放置图片后 当前列的高度发生了变化 我们要对数组的值进行更新
                    //然后 后续的循环才能根据新的数组 来重新寻找最小值

                    //给数组中之前 数值最小的那一项  加上当前这个图片的高度
                    //在之前的高度的基础上 再加上 新加入的图片的高度
                    arrHeight[minHeightIndex] = minHeight + boxes[i].offsetHeight;
                }
            }
        }

        waterfall();
        //console.log(arrHeight);
        //console.log(minHeight);
        //console.log(minHeightIndex);

        //5.判断触底
        window.onscroll = function () {
            if (bottomed()) {
                //alert("触底了,要加载图片了");
                //加载图片
                var json = [
                    {"src": "images/P_000.jpg"},
                    {"src": "images/P_001.jpg"},
                    {"src": "images/P_002.jpg"},
                    {"src": "images/P_003.jpg"},
                    {"src": "images/P_004.jpg"},
                    {"src": "images/P_005.jpg"},
                    {"src": "images/P_006.jpg"},
                    {"src": "images/P_007.jpg"},
                    {"src": "images/P_008.jpg"},
                    {"src": "images/P_009.jpg"},
                ];
                //.box>img
                for (var i = 0; i < json.length; i++) {
                    //json[i]//每一条数据
                    var div = document.createElement("div");
                    div.className = "box";
                    container.appendChild(div);
                    var img = document.createElement("img");
                    img.src = json[i].src;
                    div.appendChild(img);
                    //新加载出来的盒子 样式有问题 需要重新通过JS设置位置
                    waterfall();

                }
            }
        };

        function bottomed() {
            //窗口的高度+页面被卷去的头部 > 最后一个盒子的offsetTop
            //窗口的高度
            var clientHeight = window.innerHeight;
            //页面被卷去的头部
            var scrollTop = window.pageYOffset;
            //最后一个盒子的offsetTop
            var lastBox = boxes[boxes.length - 1];//最后的盒子
            var lastBoxTop = lastBox.offsetTop;
            //窗口的高度+页面被卷去的头部 > 最后一个盒子的offsetTop
            if (clientHeight + scrollTop > lastBoxTop) {
                return true;//表示触底了
            }
            return false;//没有触底
        }

    };


    function getMin(arr) {
        var min = {};
        min.index = 0;//最小值的索引
        min.value = arr[min.index];//最小值的值
        //遍历数组 一个一个比较
        for (var i = 0; i < arr.length; i++) {
            if (min.value > arr[i]) {
                min.value = arr[i];
                min.index = i;
            }
        }
        return min;
    }

</script>
</body>
</html>

 

推荐阅读