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

最新推荐文章于 2024-07-10 13:54:40 发布

帝尊菜鸟

最新推荐文章于 2024-07-10 13:54:40 发布

阅读量4k

点赞数 8

分类专栏： CSS javascript 文章标签：瀑布流纯css瀑布流瀑布流布局瀑布流懒加载懒加载

本文链接：https://blog.csdn.net/dizuncainiao/article/details/115246043

版权

javascript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

瀑布流简介

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

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

本篇采用的或许是目前最简单的实现瀑布流的方式—— 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></div>'
            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>