模拟瀑布流效果（附带注释） 

<!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 {
      border: 1px solid #ccc;
      padding: 5px;
      float: left;
      /* position: absolute; */
    }
  </style>
</head>

<body>

  <div class="container" id="container">
    <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_020.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_020.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_020.jpg" alt=""></div>
  </div>


  <script src="water.js"></script>

</body>

</html>

　　

//获取标签图片
var container = document.getElementById('container');
var box = container.children;

//判断可视区域能显示多少列

//获取可视窗口宽度
var winWidth = window.innerWidth;
// 获取box宽度 因为都一样宽 所有随便选一个就可以获取
var boxWidth = box[35].offsetWidth;
//  计算能够显示多少列
var column = parseInt(winWidth / boxWidth);
//定义一个空数组用来存每列box的高度
var boxHeight = [];

//遍历box
function waterFull() {
    for (var i = 0; i < box.length; i++) {
        //判断是否是地一行
        if (i < column) {
            //是， 把这一行的高度添加到数组中,每个代表这一列的高度
            boxHeight[i] = box[i].offsetHeight
        } else {
            //第二行及以后
            // 把他放到缺口中（上一行高度最小的）
            //先找到上一行最矮的高度,下标和距左面距离
            //最矮的
            var minBoxHeight = Math.min.apply(null, boxHeight);
            // 他的下标
            var minBoxIndex = boxHeight.indexOf(minBoxHeight)
            //他距离左面的距离
            var minBoxLeft = box[minBoxIndex].offsetLeft;
            // 把下一行的位置放到这里
            box[i].style.position = 'absolute';
            box[i].style.top = minBoxHeight + 'px';
            box[i].style.left = minBoxLeft + 'px';
            //更新数组
            //把最小的列的高度更新
            boxHeight[minBoxIndex] = minBoxHeight + box[i].offsetHeight;
        }
    }
}
waterFull();

window.onscroll = function () {
    //当最后一个box进入可视窗口时添加新的box以免出现空白
    //获取浏览器可视窗口高度
    var winHeight = window.innerHeight;
    // 浏览器头部卷去高度
    var scrollTop = window.pageYOffset;
    // 最后一个box距离页面顶端距离
    var endBoxTop = box[box.length - 1].offsetTop;
    //判断最后一个box是否进入可视窗口
    if (winHeight + scrollTop >= endBoxTop) {
        //最后一张出现,动态追加box
        json.forEach(element => {
            var newDiv = document.createElement('div');
            var newImg = document.createElement('img');
            newImg.src = element.src;
            newDiv.className = 'box';
            container.appendChild(newDiv);
            newDiv.appendChild(newImg);
            waterFull();
        });
    }
}


var json = [{        "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"    }
]

　　

posted @ 2019-07-06 21:07  cola_orz  阅读(287)  评论(0)    收藏  举报