3分钟了解瀑布流的核心思想

一、前言

瀑布流的效果在现在是很常见的，还没掌握瀑布流的小伙伴抓紧learn一下吧

二、思路分析

2.1、效果展示

unsplash官网 就是这样的效果，小伙伴们可以点进去看一下，截图如下：

2.2、瀑布流特点

• 等宽不等高
• 滚动加载

2.3、实现分析

2.3.1、布局分析

瀑布流似乎没有布局，就是换行 + 滚动加载, 其中换行要求 每一列的行间距 是一样的, 那么此时我们应该会有3个大体思路：

• grid网格布局可以轻松过实现这样的布局
• 换行可以用css实现，但是要想每一列的行间距一样，我们得用js控制一下
• 换行也用js实现，每一列的行间距相等也用js控制一下

通过上面的分析我们发现，到目前为止，能算的上难点的可能就是js控制每列行间距相等的这个功能

2.3.2、js实现每列行间距相等

这里我们以flex布局为例，一行显示3个元素，间隔gap = 10px; 多余元素依次换行，html 如下：

    <div class = 'box'>
        <! --  
            1、高度、颜色 这里随机展示，就不贴具体的css、js 代码了
            2、这里只是举例，正常来说应该在onLoad函数里手动写一个函数，用于批量生成 box-item 元素
               这样就可以与下文的transform一起完成 基础版 瀑布流效果
        -- >
        <div class = 'box-item'>1</div>
        <div class = 'box-item'>2</div>
        <div class = 'box-item'>3</div>
        <div class = 'box-item'>4</div>
        <div class = 'box-item'>5</div>
    </div>

css如下:

    .box {
        width: 630px;
        display: flex;
        flex-wrap: wrap;
    }
    .box-item {
        width: 200px;
        margin-bottom: 30px;
        box-sizing: border-box;
        flex-grow: 0;
    }

效果如下图：

这时我们会发现每列的 行间距 并不相等，所以我们需要使用 js 来手动控制一下，改变元素位置的方式有很多，transform、top等等，这里我们以transform为例，js代码如下：

    // 前3个元素不变，第4个元素的距离第1个元素的距离是30，第5对第2，第6对第3
    // 第7对第4，依次类推...
    window.onLoad = function (){
        [...document.querySelectorAll('.box-item')].forEach( function (item, index){
            if (index >= 3){
                [...document.querySelectorAll('.box-item')][index].style.transform = 'translateY(-' + ( document.querySelectorAll('.box-item')[index].getBoundingClientRect().top - document.querySelectorAll('.box-item')[index - 3].getBoundingClientRect().height - document.querySelectorAll('.box-item')[index - 3].getBoundingClientRect().top - 30 ) + 'px)';
            }
        } );
    }

2.3.3、滚动加载

实现滚动加载的方案有很多，我们采用最原始、最朴素的方式，即 scrollTop + clientHeight >= scrollHeight, js代码如下：

    const scrollHeight = document.body.scrollHeight;
    const scrollTop = document.body.scrollTop;
    const clientHeight = document.body.clientHeight;
    window.onScroll = function (){
        if (clientHeight + scrollTop >= scrollHeight ){
            // 延迟加载
            setTimeout( function (){
                // 创建 box-item 元素并插入到现有元素集合中，随后执行 onLoad 函数逻辑
            }, 3000);
        }
    }

三、最后

本文采用 css换行 + js固定距离 + 滚动加载 的方式实现了一个瀑布流，实现这个效果的方式有很多种，但是万变不离其中，都是 换行 + 固定距离 + 滚动加载, 只是手段不一样，那么本文到这里也就结束啦，下文再见啦