简单图片瀑布流

àì夳堔傛蜴生んèń 2022-06-09 13:24 301阅读 0赞

html部分

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>瀑布流</title>
            <link rel="stylesheet" type="text/css" href="../css/reset.css" />
            <link rel="stylesheet" type="text/css" href="../css/瀑布流.css" />
            <script type="text/javascript" src="../js/basics.js"></script>
            <script type="text/javascript" src="../js/瀑布流.js"></script>
        </head>
        <body>
            <div class="item"><img src="../img/瀑布流/img (1).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (2).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (3).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (4).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (5).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (6).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (7).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (8).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (9).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (10).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (11).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (12).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (13).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (14).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (15).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (16).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (17).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (18).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (19).jpg"/></div>
            <div class="item"><img src="../img/瀑布流/img (20).jpg"/></div>
        </body>
    </html>

CSS部分

.item{ width: 188px; float: left; margin-right: 5px; }
    .item img{ width: 180px; padding: 3px; border: solid 1px #CCCCCC; }

JSb部分

/*
     * 思路：
     * 第一行的图片正常显示
     * 从第二行开始将图片逐个加到最短的列的后面
     * 实现：
     * 1、根据浏览器的窗口大小调整列数
     * 2、第一行的图片不定位，正常显示
     * 3、记录所有列的最小高度和最小高度对应的是第几列的
     * 4、从第二行开始将图片设置为相对定位，left值为最小高度对应的元素的offsetLeft,top值为最小高度（这里的已定位父级未设置，则为body）
     * 5、更新原来的最小高度位置的高度值
     * 
     * 
     * 下拉刷新：
     * 1、判断临界值:最后一张图片的offsetTop <= 浏览器的高度 + 滚动条的高度时候，加载新的内容
     * 2、用循环创建用创建新的div,class名为item,加上子节点img
     * 
     * 
     * 注意点：
     * 1、for(var i = 0;i < items.length;i++)所有的包含图片的div都要判断，所以是i < items.length;
     * 2、var minHeight = columnHeightArr[0];  判断图片时每次都要重新创建，用于保存最新的最小高度和最小高度所在的位置
          var minHeightIndex = 0;
     */
    
    
    window.onload = window.onresize = function(){
        layout();
    }
    
    function layout(){
        var items = document.getElementsByClassName('item');
    
        //列数
        var column = Math.floor(document.documentElement.clientWidth/items[0].offsetWidth);
    
        var columnHeightArr = [];
        console.log( items.length);
        for(var i = 0;i < items.length;i++){
            if(i < column){
                items[i].style.position = 'static';
                columnHeightArr.push(items[i].offsetHeight);
            }else{
                items[i].style.position = 'absolute';
    
                var minHeight = columnHeightArr[0];  //每一次重新判断，所有要定义在里面
                var minHeightIndex = 0;
                for(var j = 0;j < columnHeightArr.length;j++){
    
                    if(columnHeightArr[j] < minHeight){
                        minHeight = columnHeightArr[j];
                        minHeightIndex = j;
                    }
                }
    
    
                items[i].style.left = items[minHeightIndex].offsetLeft + 'px';
                items[i].style.top = minHeight + 'px';
    
                columnHeightArr[minHeightIndex] += items[i].offsetHeight;
            }   
        }
    };
    
    //下拉更新
    window.onscroll = function(){
        var items = document.getElementsByClassName('item');
    
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    
        var clientHeight = document.documentElement.clientHeight;
    
        if(items[items.length-1].offsetTop <= (scrollTop+clientHeight)){
            for(var i = 21;i <= 42;i++){
                var oDiv = document.createElement('div');
                oDiv.className = 'item';
                 var oImg = document.createElement('img');
                 oImg.src = '../img/瀑布流/img ('+i+').jpg';
                 oDiv.appendChild(oImg);
                document.body.appendChild(oDiv);
            }
            layout();
        }
    };