前端学习笔记day16 瀑布流案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .itemBox {
            width: 1050px;
            position: relative;
            margin: 0px auto;    
        }
        .item {
            /*width: 192px;    */
            border: 1px solid lightgrey;
            padding: 4px;
            position: absolute;

        }
    </style>
</head>
<body>
    <div class='itemBox'>
        <div class='item'>
            <img src="images/P_000.jpg" alt="">
        </div>
        <div class='item'>
            <img src="images/P_001.jpg" alt="">
        </div>
        <div class='item'>
            <img src="images/P_002.jpg" alt="">
        </div>
        <div class='item'>
            <img src="images/P_003.jpg" alt="">
        </div>
        <div class='item'>
            <img src="images/P_004.jpg" alt="">
        </div>
        <div class='item'>
            <img src="images/P_005.jpg" alt="">
        </div>
        <div class='item'>
            <img src="images/P_006.jpg" alt="">
        </div>
        <div class='item'>

            <img src="images/P_007.jpg" alt="">
        </div>
        <div class='item'>

            <img src="images/P_008.jpg" alt="">
        </div>
        <div class='item'>

            <img src="images/P_009.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_000.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_001.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_002.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_003.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_004.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_005.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_006.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_007.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_008.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_009.jpg" alt="">
        </div>

    </div>


    <script>
        window.onload = function() {
            var itemBox = document.getElementsByClassName('itemBox')[0];
            var item = document.getElementsByClassName('item');
            var itemBoxW = itemBox.offsetWidth;
            var itemW = item[0].offsetWidth;
            var column = parseInt(itemBoxW/itemW);
            var distance = (itemBoxW - itemW*column)/(column - 1);
            var arr = [];
            waterFull();
            console.log('dsjfldf');
            window.onscroll = function () {
                console.log('dsjfldf');
                if(window.innerHeight + window.pageYOffset > getMin(arr).minV) {
                    console.log('dsjfldf');
                    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" },
                        { "src": "./images/P_010.jpg" }
                        ];
                    for(var i = 0;i < json.length;i++) {
                        var div = document.createElement('div');
                        div.className = 'item';
                        var img = document.createElement('img');
                        img.src = json[i].src;
                        div.appendChild(img);
                        itemBox.appendChild(div);

                    }
                    waterFull();
                }
            }
            function waterFull() {
                for(var i = 0;i < item.length;i++) {
                    
                    if(i<column) {

                        arr[i] = item[i].offsetHeight;
                        
                        item[i].style.left = (distance + itemW)*i + 'px';
                        item[i].style.top = 0;    

                    } else {
                        var minI = getMin(arr).minI;
                        var minV = getMin(arr).minV;
                        item[i].style.left = minI * (distance + itemW) + 'px';
                        item[i].style.top = arr[minI] + distance + 'px';
                        arr[minI] = arr[minI] + distance + item[i].offsetHeight;

                    }
                } 
            }
            function getMin(arr) {
                var o = {};
                o.minI = 0;
                o.minV = arr[0];
                for(var i = 1;i<arr.length;i++) {
                    if(arr[i] < o.minV) {
                        o.minI = i;
                        o.minV = arr[i];
                    }
                }
                return o;
            }
            
        }
    </script>    
</body>
</html>
运行结果：
我觉得我应该不会忘记当页面有图片需要加载完再做处理时应该吧要写的script代码放在 window.omload = function() {} 里面微笑.jpg；
还有就是window.onscroll = function() {} 起作用的前提是页面中的内容足够长，可以在浏览器的窗口显示滚动条才行微笑*2;
前端学习笔记day16 瀑布流案例

猜你喜欢
