javascript图片瀑布流 h5瀑布流布局

我有故人抱剑去，斩尽春风未肯归

*** js的瀑布流网上很多，看来看去能用的感觉很少 对于一个新手来说 有一大部分都看不明白 经过我找啊找终于找到了一个简单易懂的瀑布流，奈斯

先看效果图  是横向排列的

然后来说具体实现 和 源码

首先是样式 我是自己写的css  盒子大小什么的 

 

 这就是大概的样子 父盒子 需要一个相对定位   每一项的话 需要一个绝对定位就ok了 宽度也一定要设置

然后是js源码

  由于作者都写了 我就不多说了  我就看了一会就看明白了 

// img图片资源,有时加载耗时比较长,js中直接获取拿不到一些属性
    window.onload = function() {
        // 1 获取节点
        let boxObj = document.getElementById('mode');
        // 如果使用query获取,每次追加则要重新获取图片节点
        let imgsObj = document.querySelectorAll('.case_item');

        // 使用getElements则不用
        //let imgsObj = document.getElementsByClassName('item');

        // 2 计算页面中能显示几列
        // 2-1 获取当前可视区域宽度
        let cliW = window.innerWidth || document.body.clientWidth;
        // 2-2 获取图片的宽度
        let imgW = imgsObj[0].offsetWidth;
        console.log(cliW);
        console.log(imgW);
        let col = parseInt(cliW / imgW);

        console.log(col);

        // 左右和上下间隔
        let leftM = 18;
        let topM = 18;
        waterFull();
        // 控制图片的显示
        function waterFull() {
            imgsObj = document.querySelectorAll('.case_item');
            // 保存图片高度
            let imgHArr = [];
            //1 遍历所有的图片
            Array.from(imgsObj).forEach((img, key) => {
                console.log(img);
                if (key < col) { // 第一排图片
                    // top值为0
                    img.style.left = (imgW + leftM) * key + 24 + 'px';
                    // 图片高度和数组中元素是一一对应的
                    imgHArr.push(img.offsetHeight);
                } else { // 非第一排
                    // 2 找到所有元素中,最小的值

                    //2-1 假设最小值,同时添加索引
                    let min = imgHArr[0];
                    let minIndex = 0;
                    imgHArr.forEach((vv, kk) => {
                        // 比较当前元素和循环元素
                        if (min > vv) {
                            min = vv; // 交换最小值
                            minIndex = kk;
                        }
                    });
                    //console.log(min, minIndex);
                    // 给最短的一列追加图片
                    img.style.left = imgsObj[minIndex].offsetLeft + 'px';
                    img.style.top = min + topM + 'px';
                    // 更新图片高度数组
                    imgHArr[minIndex] = min + img.offsetHeight + topM;
                }

            });

            //console.log(imgHArr);

        }

        /*******无限加载的实现******/
        // 获取可视区高度
        let cliH = window.innerHeight;
        //console.log(cliH);
        // let imgArr = [
        //     './statics/QQ截图20220113095937.png',
        // ];
        //2 滚动条事件
        window.onscroll = function() {
            // 内容高度
            let contH = imgsObj[imgsObj.length - 1].offsetTop;
            // 滚动条高度
            let scroll = document.documentElement.scrollTop;
            //console.log(scroll);

            // 判断内容高度,是否小于滚动条+可视区域高度
            // if (contH < (cliH + scroll)) {
            //     //   console.log(1111);
            //     let imgTag = '';
            //     imgArr.forEach((img) => {
            //         imgTag += '<img src=' + img + ' class="item">';
            //     });
            //     // 追加到box中
            //     // console.log(imgTag);
            //     box.innerHTML += imgTag
            //     waterFull();
            // }

        }
    }

！！！备注：更新数据以后如果视图不能更新，重新调用一下方法即可

 

侵权删