原生js实现瀑布流之无限加载

我会带着你远行 2024-04-18 23:24 83阅读 0赞

瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布流可以提供很好的用户体验，通过结合下拉刷新，上拉加载进行数据的懒加载等操作，对于用户的体验感来说是接近于满分的！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNzIwMw_size_16_color_FFFFFF_t_70]

## 瀑布流的特点 ##

其实瀑布流的特点就是参差不齐的排列方式，以及流式布局的扩展性，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动。

## 瀑布流的原理 ##

通过将元素定位，并且通过javascript动态的计算每一项元素的所处位置，给元素动态的设置left和top值，让它待在自己应该在的位置。  
即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，依次按照规则放入指定位置。

## 瀑布流的位置分析 ##

当第一排排满足够多的等宽图片时（如下图情况），自然而然的考虑到之后放置的图片会往下面排放。  
![在这里插入图片描述][format_png]

那么第六张图片，放置在什么位置呢？

在瀑布流中，我们的第六张图的位置应该是第一行中的高度最低的那一张图片的下方，即

![在这里插入图片描述][format_png 1]

为什么呢？  
因为放置它之前，这一列的高度为所有列中最小，所以会放置在这个地方。

## 代码实现 ##

HTML  
就是一个class为cont的盒子包括多个box盒子，在其中有个imgbox的盒子，然后里面才放图片，看到这里你会有所疑问了，为什么会设置两层呢？

因为在这里clientWidth只能获取到padding而不能获取margin，因此使用padding将盒子间距拉开

CSS

.cont { 
            margin: 0 auto;
          }
          .box { 
            float: left;
            padding: 6px;
          }
          .imgbox { 
            border: solid 1px black;
            border-radius: 6px;
            padding: 6px;
          }
          .imgbox img { 
            width: 200px;
            display: block;
          }
            body { 
                background: url("images/a.png");
            }

JS  
这里因为拿不到后台数据，就自己写了个对象模拟下后台数据

onload = function(){ 
                new Waterfall();
            };
    
            // W1.准备数据--->自己模拟数组，假装后台给的
            // W2-0.绑定滚动事件
            // W2.找到页面是否到底--->可视区域的高度+滚走的距离 >= 总高度-100
            // W3.渲染页面
            // W4.生效瀑布流布局
    
            // OOP
            function Waterfall(){ 
                // 1.获取元素
                this.ocont = document.querySelector(".cont");
                this.abox = document.querySelectorAll(".box");
    
                // 将来准备存放第一行元素所有高度的数组
                this.heightArr = [];
    
                // 2.布局
                this.init()
    
                // W1.准备数据
                this.data = this.load();
                // W2-0.绑定滚动事件
                this.addScroll();
            }
            Waterfall.prototype.load = function(){ 
                return [{ img:"images/1.jpg"},{ img:"images/2.jpg"},{ img:"images/3.jpg"},{ img:"images/4.jpg"},{ img:"images/5.jpg"},{ img:"images/6.jpg"},{ img:"images/7.jpg"},{ img:"images/8.jpg"},{ img:"images/9.jpg"},{ img:"images/10.jpg"},]
            }
            Waterfall.prototype.addScroll = function(){ 
                var that = this;
                onscroll = function(){ 
                    // W2.找到页面是否到底
                    if(that.isBottom()){ 
                        that.data.forEach(val=>{ 
                            // W3.渲染页面
                            var img = document.createElement("img");
                            img.src = val.img;
    
                            var imgbox = document.createElement("div");
                            imgbox.className = "imgbox";
    
                            var box = document.createElement("div");
                            box.className = "box";
    
                            imgbox.appendChild(img);
                            box.appendChild(imgbox);
    
                            that.ocont.appendChild(box)
                        })
    
                        // W4.生效瀑布流布局
                        that.abox = document.querySelectorAll(".box");
                        that.heightArr = [];
                        that.firstLine();
                        that.otherLine();
                    }
                }
            }
            Waterfall.prototype.isBottom = function(){ 
                // 页面是否到底
                var clientH = document.documentElement.clientHeight;
                var scrollT = document.documentElement.scrollTop;
                var scrollH = document.documentElement.scrollHeight;
                if(clientH + scrollT >= scrollH-200){ 
                    return true;
                }else{ 
                    return false;
                }
            }
    
            Waterfall.prototype.init = function(){ 
                // 布局
                this.num = Math.floor(document.documentElement.clientWidth / this.abox[0].offsetWidth)
    
                this.ocont.style.width = this.num * this.abox[0].offsetWidth + "px";
                // 3.区分第一行
                this.firstLine();
                // 和后面的行
                this.otherLine();
            }
            Waterfall.prototype.firstLine = function(){ 
                // 4.在第一行，找到第一行所有的高度
                for(var i=0;i<this.num;i++){ 
                    this.heightArr.push(this.abox[i].offsetHeight)
                }
            }
            Waterfall.prototype.otherLine = function(){ 
                // 5.在后面的行，找到最小高度
                for(var i=this.num;i<this.abox.length;i++){ 
                    var min = getMin(this.heightArr);
                    var minIndex = this.heightArr.indexOf(min);
                    // 设置定位，left，top
                    this.abox[i].style.position = "absolute";
                    this.abox[i].style.top = min + "px";
                    this.abox[i].style.left = minIndex * this.abox[0].offsetWidth + "px";
                    // 6.修改之前的最小高度
                    this.heightArr[minIndex] += this.abox[i].offsetHeight;
                }
            }
    
            function getMin(arr){ 
                // 注意数组的深浅拷贝：深拷贝
                var myarr = [];
                arr.forEach(val => { 
                    myarr.push(val);
                });
                return myarr.sort((a,b)=>a-b)[0];
            }
    
        </script>

这里需要加onload，否则瀑布流无法实现  
因为img是可置换标签，它分为标签本身和引入的资源（src中），资源会单独加载  
这里提到了onload，我就来说下window.onload和document.onload的区别  
window.onload:结构后资源都加载完成后，才加载onload中的内容  
document.onload:只有结构加载完成，就直接加载onload中的内容，它不会等外部资源加载完成

在其中尤其注意数组的深浅拷贝，这是比较容易忽略的，下期我给大家来说一下深浅拷贝！  
今天很高兴，毕竟是中秋佳节，兴致来了连续更新两篇博客，啦啦啦

## 最后再祝大家中秋快乐呀！ ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNzIwMw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b13070fa7b774765925aef973f1d0ae9.png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODA4NzQ1Ni04YTc1MDQ5ZGIxYjk1MGUxLnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODA4NzQ1Ni02YzAyOGRlYmFhNDkwMDM0LnBuZw?x-oss-process=image/format,png