JS 瀑布流

重点讲解都在注释里

基本原理：将每张图片都定位到每一列中高度最小的那一列的后面，每当滚动页面的时候就加载一张图片，然后给图片定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #ccc;
        }
        .container{
            width: 700px;
            height: auto;
            margin: 0 auto;
            position: relative;
        }
        .box{
            width:200px;
            float: left;

        }
        .box .box_img img{
            width: 95%;
        }
    </style>
</head>
<body>

    <div class="container" id="container">

        <div class="box">
            <div class="box_img"><img src="./img/12.jpg"></div>
        </div>
        <div class="box">
            <div class="box_img"><img src="./img/2.jpg"></div>
        </div>
        <div class="box">
            <div class="box_img"><img src="./img/3.jpg"></div>
        </div>
        <div class="box">
            <div class="box_img"><img src="./img/4.jpg"></div>
        </div>
        <div class="box">
            <div class="box_img"><img src="./img/5.jpg"></div>
        </div>
        <div class="box">
            <div class="box_img"><img src="./img/6.jpg"></div>
        </div>
        <div class="box">
            <div class="box_img"><img src="./img/7.jpg"></div>
        </div>
        <div class="box">
            <div class="box_img"><img src="./img/8.jpg"></div>
        </div>
        <div class="box">
            <div class="box_img"><img src="./img/9.jpg"></div>
        </div>

        <div class="box">
            <div class="box_img"><img src="./img/10.jpg"></div>
        </div>

        <div class="box">
            <div class="box_img"><img src="./img/11.jpg"></div>
        </div>

        <div class="box">
            <div class="box_img"><img src="./img/12.jpg"></div>
        </div>

        <div class="box">
            <div class="box_img"><img src="./img/13.jpg"></div>
        </div>


        <div class="box">
            <div class="box_img"><img src="./img/12.jpg"></div>
        </div>

        <div class="box">
            <div class="box_img"><img src="./img/13.jpg"></div>
        </div>

        <div class="box">
            <div class="box_img"><img src="./img/12.jpg"></div>
        </div>

        <div class="box">
            <div class="box_img"><img src="./img/13.jpg"></div>
        </div>

        <div class="box">
            <div class="box_img"><img src="./img/12.jpg"></div>
        </div>

        <div class="box">
            <div class="box_img"><img src="./img/13.jpg"></div>
        </div>
    </div>

    <script>

window.onload = function () {
    var imgArr = [{src:"./img/1.jpg"},{src:"./img/2.jpg"},{src:"./img/3.jpg"},{src:"./img/4.jpg"},{src:"./img/5.jpg"},{src:"./img/6.jpg"},{src:"./img/7.jpg"},{src:"./img/8.jpg"},{src:"./img/9.jpg"},{src:"./img/10.jpg"},]

    waterFall();

    function waterFall() {

        var container = document.getElementById('container');
        // var boxArr = container.getElementsByTagName('*');
        var boxArr  = container.getElementsByClassName('box');
        var colWidth  = container.getElementsByClassName('box')[0].offsetWidth;
        var col = Math.floor(container.offsetWidth / colWidth);

        var colHeight = [];     //每一列的高度

        for(let i=0;i<boxArr.length;i++){
            if(i<col){
                colHeight.push(boxArr[i].offsetHeight);
            }else{
                var min = Math.min.apply(Math,colHeight);   //高度最小的
                var minIndex = findMinIndex(colHeight,min); //高度最小的下标
                boxArr[i].style.position = 'absolute';
                boxArr[i].style.top = min + 'px';           //将图片的top坐标 定位到 列中 高度最小的那一列
                boxArr[i].style.left = colWidth * minIndex   +'px';     //图片的left坐标 即为 列宽度 * 列的索引值
                colHeight[minIndex] += boxArr[i].offsetHeight;      //最后 更新 存放 每一列高度的 colheight 数组
            }
        }

    }

window.onscroll = function () {
    var bodyHeight = document.documentElement.offsetHeight;
    var clientHeight = document.documentElement.clientHeight;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollH = document.body.scrollHeight;
    // console.log('页面高度' + bodyHeight)
    // console.log('可视区域' + clientHeight)
    // console.log('scroll' + scrollTop);
    // console.log(scrollH);
    if(scrollTop+clientHeight >= (scrollH-50)){         //滚动就 加载一张图片 然后 排列图片
            console.log(scrollTop+clientHeight +'|||||'+ (scrollH-50));

            var imgIndex =  Math.floor(Math.random() * imgArr.length);
            console.log(imgIndex)

            var box = document.createElement('div');
            var box_img = document.createElement('div');
            box.className = 'box';
            box_img.className = 'box_img';
            container.append(box);
            box.append(box_img);
            var img = document.createElement('img');
            img.src = imgArr[imgIndex].src;
            box_img.append(img) 
    }
    waterFall()
}



    // 找到 高度数组中最小的数的index   
    function findMinIndex(arr,min){
        var index ;
        for(var i=0,length=arr.length;i<length;i++){
            if(arr[i] == min){
                return i;
            }
        }
    }
}
</script>
</body>
</html>

重点讲解 都在注释里

基本原理：将每张图片都定位到 每一列中 高度最小的 那一列的 后面，每当滚动页面的时候 就 加载一张图片，然后给图片定位。

猜你喜欢

重点讲解都在注释里

基本原理：将每张图片都定位到每一列中高度最小的那一列的后面，每当滚动页面的时候就加载一张图片，然后给图片定位。