也许是最简单的纯 CSS 实现瀑布流布局！！！

效果图

瀑布流简介

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

以上解释还是比较好理解的，瀑布流大多时候采用在以图片为主的商品展示类网站中，比如：蘑菇街

本篇采用的或许是目前最简单的实现瀑布流的方式—— columns 多列布局 ，下面直接上代码。

CSS & HTML

<style>
    .box-wrapper {
        column-count: 6;
        column-gap: 0;
    }

    .box-item {
        box-sizing: border-box;
        break-inside: avoid;
        padding: 10px;
    }

    .box-item > div {
        height: 100%;
        background: #4286F5;
        box-sizing: border-box;
    }
style>


<div class="box-wrapper">
	<div class="box-item">
        <div>div>
    div>
	<div class="box-item">
        <div>div>
    div>
    ...
div>

代码很简单，两三个 css 属性就解决了。其中的关键属性就是 column-count ，它用来定义列数。column-gap 定义列的间距，它会有个默认的间距。我这里采用 padding 来设置间距，因此要将它设为 0。

columns 多列布局 设计的初衷应该是为了实现类似报纸上那样的多栏阅读样式，它可以将一大段文字折成多列。因此在这里，子元素 div 也会在一些随机位置被折断。瀑布流布局主要展示图片之类的，如果折断必然不好看，这里可以采用 break-inside 来避免。

break-inside CSS 属性描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。

break-inside 有多个属性值不做赘述，这里采用 break-inside: avoid; 即可避免子元素被折断。

另外需要注意的是：多列布局的子元素高度一定要不一样，否则它可能会出现列数和预期的不一致。

区区几行 css 便能实现 参差不齐的多栏瀑布流布局 ，而 不断加载数据块并附加至当前尾部 则必须要 js 加以实现了。

瀑布流的懒加载

实际应用中肯定是借助接口实现懒加载的数据的，这里为了方便用 js 生成数据，直接贴代码：

<script>
    const INITIAL_NUMBER = 40
    const boxWrapper = document.querySelector('.box-wrapper')

    function createFragment(num) {
        const fragment = document.createDocumentFragment()
        for (let i = 0; i < num; i++) {
            const div = document.createElement('div')
            const randomHeight = Math.random() * 400 + 100
            div.innerHTML = '
'
            div.style.height = `${randomHeight}px`
            div.classList.add('box-item')
            fragment.appendChild(div)
        }
        return fragment
    }

    function createLoading() {
        let loading = document.querySelector('.loading')
        if (!loading) {
            loading = document.createElement('div')
            loading.classList.add('loading')
        }
        return loading
    }

    function init() {
        boxWrapper.appendChild(createFragment(INITIAL_NUMBER))
    }

    function scrollHandler() {
        const {scrollTop, clientHeight, offsetHeight} = document.documentElement
        const nearBottom = offsetHeight - clientHeight === scrollTop

        if (nearBottom) {
            const num = Math.ceil(Math.random() * 10) + 10
            const fragment = createFragment(num)
            const loading = createLoading()
            document.body.appendChild(loading)
            setTimeout(() => {
                document.body.removeChild(loading)
                boxWrapper.appendChild(fragment)
            }, 1000)
        }
    }

    function debounce(callback, delay) {
        let timer = null
        return function () {
            clearTimeout(timer)
            timer = setTimeout(callback, delay)
        }
    }

    window.addEventListener('load', init)
    window.addEventListener('scroll', debounce(scrollHandler, 100))
</script>

滚动时判断是否触底，然后将模拟生成的 dom append 到父级中就行了，实现原理就这么简单。

更全更详细的代码点 这里

缺点

多列布局实现瀑布流或许是最简单的方式，但是它有一个缺点。如果展示的内容需要排序或是直接就有序号的，它的排列是这样：

依照以上的排序方式，如果某个电商网站想要将热度高的商品排在前面就行不通了。并且随着数据的增多，它的排序会更加离谱，这就是多列布局的局限所在了。下一篇 ，我会实现一种类似 蘑菇街 的布局来解决这一缺点。

参考

网上demo