在js中的瀑布流布局理解

布满荆棘的人生 2022-01-23 04:41 321阅读 0赞

一、瀑布流的理解

1.  **瀑布流**  
    1）图片的宽度固定，图片的长度不一样  
    2）当页面滚动时 ，会再次加载数据，动态的渲染在页面上  
    3）是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局  
    4）随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部  
    5）瀑布流的常见布局方式有三种，分别是等高等宽、等高不等宽和等宽不等高
2.  **瀑布流布局的原理**  
    1）设置图片宽度一致  
    2）根据浏览器宽度以及每列宽度计算出列表个数，列表默认0  
    3）当图片加载完成，所有图片依次放置在最小的列数下面  
    4）父容器高度取列表数组的最大值
3.  **瀑布流的解决方案**  
    1）对每一条显示数据使用绝对定位+浮动的方式，这样也会有一个问题----必须要知道每一条信息的具体高宽度  
    2）采用列布局，将每一条数据依次放置到每一列
4.  **瀑布流的具体实现步骤**  
    1）首先瀑布流所有的图片应该保持宽度一致，高度是由内容决定。设置左浮动，通过定位的方式是我们实现瀑布流的最基本的原理，只要我们动态的设置它的top值、left值，就能让它排列  
    2）定位后确定浏览器显示区域内，一行能放多少列图片盒子，通过定位的方式，先排列第一行  
    获取页面的宽度  
    获取图片盒子的宽度  
    显示的列数 = 页面宽度/图片盒子宽度  
    `column = pageWidth / itemWidth`  
    3）为了美观我们可以加上一个空隙，通过定位的方式，先排列第一行中加空隙  
    显示的列数 = 页面宽度/(图片盒子宽度+间隙)  
    `column = pageWidth / (itemWidth + gap)`  
    4）确定列数之后，排列第一行  
    下面还有很多图片盒子，我们先要排列第1行，所以在for循环里就要判断一下，当i(所有图片盒子的索引) < column(显示列数)的时候，说明在第1行  
    知道在第1行之后，动态设置每个图片盒子的left值就能排好第1行  
    `left = i * ( itemWidth + gap )`  
    5）第1行排列好之后，获取第1行所有图片盒子的高度，排列第二行，获取盒子高度，存到数组中  
    需要定义一个数组arr，将获取到的高度存在数组中，因为第2行排列的时候需要考虑top值，此时只能根据第1行图片盒子的高度来设置  
    获取图片高度的时候要注意，程序必须写在入口函数onload里面，因为图片的加载特性是：等页面都加载完之后才去请求加载，所以不写在入口函数里可能会出现高度获取不到的情况  
    6）排列第2行  
    获取到刚刚数组中，高度最小的那一列，将第2行的第1个图片盒子放置在它的下方  
    此时的left值就是高度最小列的offsetLeft；top值就是：第1行高度最小列的高度(为了布局美观可以加上上下间隙gap)  
    记录下高度最小列的索引index，后面计算会用到  
    设置完成之后，会发现后面所有的图片都叠在这个高度最小列的下面，原因就是此时的最小列高度没有改变，应该加上下面图片的高度，得出一个新高度  
    7）改变最小列当前高度  
    此时的这一列高度其实已经发生改变了，所以需要将新高度赋值给数组  
    当前高度最小列的高度 = 当前高度最小列的高度 + 间隙 + 下面图片盒子的高度  
    8）触发resize事件  
    将整个设置样式的部分封装成一个函数，在onload里面注册一个resize事件，只要页面一发生改变，就触发样式部分的代码。  
    实时改变pageWidth的宽度，这样瀑布流就会是一个响应式的效果了  
    9）懒加载效果  
    目前我们用的是多张图片，假如一个页面中有几百张图片的时候，我们不可能等到它都加载完再显示，所有这里引入一个懒加载的概念，我们规定最后一张为显示的最后一张图片，当滚动条滚动到最后张的时候，应该加载下一批图片  
    即页面可视区高度+滚动条卷去的高度 = 最后一张图片的offsetTop；的时候加载下面的图片

二、瀑布流的实现

1.  html部分  
    代码如下：

2.css部分  
代码如下：

* { 
                padding: 0;
                margin: 0;
                position: relative;
            }
            .item { 
                box-shadow: 2px 2px 2px #999;
                position: absolute;
            }
            img { 
                width: 220px;
                display: block;
            }

1.  js部分  
    代码如下：

// 获取元素
        var box = document.getElementById("box");
        var items = box.children;
        // 定义每一列之间的间隙为10像素
        var gap = 10;
    
        window.onload = function(){ 
            // 一进来就调用一次
            waterFall();
    
            /* * 函数功能：封装瀑布流函数 */
            function waterFall(){ 
                // 确定列数
                var pageWidth = getClient().width;
                var itemWidth = items[0].offsetWidth;
                var columns = parseInt(pageWidth/(itemWidth+gap));
                var arr = [];
                for(var i=0;i<items.length;i++){ 
                    if(i<columns){ 
                        // 确定第一行
                        items[i].style.top = 0;
                        items[i].style.left = (itemWidth+gap)*i+"px";
                        arr.push(items[i].offsetHeight);
                    }else{ 
                        // 其它行
                        // 找到数组中的最小高度以及它的索引
                        var minHeight = arr[0];
                        var index = 0;
                        for(var j=0;j<arr.length;j++){ 
                            if(minHeight>arr[j]){ 
                                minHeight = arr[j];
                                index = j;
                            }
                        }
    
                        // 设置下一行的第一个盒子的位置
                        // top的值就是最小列的高度 + gap
                        items[i].style.top = arr[index] + gap + "px";
                        // left的值就是最小距离左边的距离
                        items[i].style.left = items[index].offsetLeft + "px";
    
                        // 修改最小列的高度
                        // 最小列的高度 = 当前的高度 + 拼接的高度 + 间隙的高度
                        arr[index] = arr[index] + items[i].offsetHeight + gap;
    
                    }
                }
            }
    
    
            /* * 函数功能：页面尺寸改变时实时触发 */
            window.onresize = function(){ 
                waterFall();
            };
    
            /* * 函数功能：当加载到第三十张的时候 */
            window.onscroll = function(){ 
                    if(getClient().height + getScrollTop() >= items[items.length-1].offsetTop){ 
                        // 模拟ajax 获取数据
                        var datas = [
                            "./images/1.jpg",
                            "./images/2.jpg",
                            "./images/3.jpg",
                            "./images/4.jpg",
                            "./images/5.jpg",
                            "./images/6.jpg",
                            "./images/7.jpg",
                            "./images/8.jpg",
                            "./images/9.jpg",
                            "./images/10.jpg",
                            "./images/11.jpg",
                            "./images/12.jpg",
                            "./images/13.jpg",
                            "./images/14.jpg",
                            "./images/15.jpg",
                            "./images/16.jpg",
                            "./images/17.jpg",
                            "./images/18.jpg",
                            "./images/19.jpg",
                            "./images/20.jpg",
                        ];
                        for(var i=0;i<datas.length;i++){ 
                            var div = document.createElement("div");
                            div.className = "item";
                            div.innerHTML = '<img src="' + datas[i] + '" alt="">';
                            box.appendChild(div);
                        }
                        waterFall();
                    }
            };
        };
    
    
    
        /* * 函数功能：clientWidth 处理兼容性 */
        function getClient(){ 
            return { 
                width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                height:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
            }
        }
    
    
        /* * 函数功能：scrollTop 处理兼容性 */
        function getScrollTop(){ 
            return window.pageYOffset || document.documentElement.scrollTop;
        }
        ```