原生JS - 瀑布流布局@郝晨光

前言

瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布流可以提供很好的用户体验，通过结合下拉刷新，上拉加载进行数据的懒加载等操作，对于用户的体验感来说是接近于满分的！
本文参考链接：浅谈瀑布流 - 作者：evenyao，感谢作者提供的思路以及图片。

瀑布流布局

正文

瀑布流的特点

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

瀑布流的原理

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

瀑布流的位置分析：浅谈瀑布流 - 作者：evenyao

当第一排排满足够多的等宽图片时（如下图情况），自然而然的考虑到之后放置的图片会往下面排放。

浅谈瀑布流 - 作者：evenyao

那么第六张图片，放置在什么位置呢？按我们正常的逻辑来看，应该是下图的位置么？

浅谈瀑布流 - 作者：evenyao
但是，在瀑布流中，我们的第六张图的位置应该是第一行中的高度最低的那一张图片的下方。
浅谈瀑布流 - 作者：evenyao

为什么呢？
因为放置它之前，这一列的高度为所有列中最小，所以会放置在这个地方。
所以我们知道了，如果再继续放置下去，第七张图片应该是这个位置，对吗？

浅谈瀑布流 - 作者：evenyao
通过瀑布流算法实验得出位置正确。看懂这个图示应该就能理解了瀑布流的原理算法。
浅谈瀑布流 - 作者：evenyao

代码实现

对于我自己实现的这个瀑布流demo来说，相较于别人的，有几点差别需要提一下：

1. 在间距计算方面，别人都是使用固定间距，这样会造成一个问题是页面右边距过大或过小，影响美观；我使用的是固定最小间距，通过最小间距计算出实际间距。保证每个元素之间的间距都是相等的。
2. 在实现的时候，考虑到了滚动条的宽度问题，使用自定义的函数获取到了滚动条的宽度并在实际计算中减去滚动条宽度。所以始终左右间距保持一致。

// 定义瀑布流算法函数
function fall() {
    const minGap = 20; // 最小间距，让每一列的最小空隙可以自定义，避免太过拥挤的情况发生。但是，会通过计算得到真实的间距。
    const itemWidth = 100; // 每一项的宽度，即当前每一个图片容器的宽度。保证每一列都是等宽不等高的。
    const scrollBarWidth = getScrollbarWidth();
    const pageWidth = window.innerWidth - scrollBarWidth; // 获取当前页面的宽度 = window.innerWidth - 滚动条的宽度
    const column = Math.floor(pageWidth / (itemWidth + minGap)); // 实际列数
    const gap = (pageWidth - itemWidth * column) / column / ((column + 1) / column); // 计算真实间距
    const items = document.querySelectorAll('li'); // 获取所有的外层元素
    const heightArr = []; // 定义一个空数组，保存最低高度。
    for (let i = 0; i < items.length; i++) {
        // 遍历所有的外层容器
        const height = items[i].offsetHeight;
        // 如果当前处在第一列
        if (i < column) {
            // 直接设置元素距离上部的位置和距离左边的距离。
            items[i].style.cssText = `top: ${gap}px;left: ${(itemWidth + gap) * i + gap}px`;
            // 保存当前元素的高度。
            heightArr.push(height);
        } else {
            // 不是第一列的话，就进行比对。
            let minHeight = heightArr[0]; // 先保存第一项的高度
            let minIndex = 0; // 保存第一项的索引值
            for (let j = 0; j < heightArr.length; j++) {
                // 通过循环遍历比对，拿到最小值和最小值的索引。
                if (minHeight > heightArr[j]) {
                    minHeight = heightArr[j];
                    minIndex = j;
                }
            }
            // 通过最小值为当前元素设置top值，通过索引为当前元素设置left值。
            items[i].style.cssText = `top: ${minHeight + gap *2}px; left: ${(itemWidth + gap) * minIndex + gap}px`;
            // 并修改当前索引的高度为当前元素的高度
            heightArr[minIndex] = minHeight + gap + height;
        }
    }
}
// 页面加载完成调用一次。
window.onload = fall;
// 页面尺寸发生改变再次调用。
window.onresize = fall;

// 获取滚动条的宽度
function getScrollbarWidth() {
    const oDiv = document.createElement('div');//创建一个div
    // 给div设置样式。随便定义宽高，只要能获取到滚动条就可以
    oDiv.style.cssText = `width: 50px;height: 50px;overflowY: scroll;` 
    document.body.appendChild(oDiv);//把div添加到body中
    const scrollbarWidth = oDiv.offsetWidth - oDiv.clientWidth;// 使最大宽度和可视宽度相减，获得到滚动条宽度。
    oDiv.remove();//移除创建的div
    return scrollbarWidth;//返回滚动条宽度
}

实现效果：

瀑布流布局实现效果

---

如果本文对您有帮助，可以看看本人的其他文章:
原生JS - 图片懒加载@郝晨光
Koa - Node.js框架学习@郝晨光
前端常见面试题（十二）@郝晨光

结言

感谢您的查阅，本文由郝晨光整理并总结，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照