纯css单层div实现自适应瀑布流

涛之雨

github 代码：https://taozhiyu.github.io/waterfall/
demo：https://taozhiyu.github.io/waterfall/
演示：

（屏幕宽度不够就靠浏览器缩放凑的屑）

核心代码：

[HTML] 纯文本查看 复制代码

<style>
    .item {
        column-gap: 22px;/*每列间隔*/
        max-width: 1500px;/*最大宽度*/
        column-count: 4;/*默认四列*/
        margin: auto;/*宽屏时居中*/
    }
    /*适应屏幕宽度*/
    @media only screen and (max-width: 1904px) {.item {column-count: 4;}}/*其实这一行可以不写。。。因为默认就是4列*/
    @media only screen and (max-width: 1264px) {.item {column-count: 3;}}
    @media only screen and (max-width: 960px) {.item {column-count: 2;}}
    @media only screen and (max-width: 600px) {.item {column-count: 1;column-gap: 0;}}

    .item>.item__content {
        text-align: center;
        overflow: auto;
        /*overflow-x可以随意，但是y一定要auto，否则div会被截断*/
        /*如果特殊需要，可以在里面嵌套一层div限制高度，外层不要动*/
    }
</style>
<div class="item">
    <div class="item__content">1</div>
    <div class="item__content">2</div>
    <div class="item__content">3</div>
    <!--省略若干行->
</div>
<script type="text/javascript">
    // 修改随机颜色为了看起来更清楚，
    // 修改随机高度为了占位
    [...document.querySelectorAll(".item__content")].map(a=>{
        a.style.background = "#" + Math.random().toString(16).slice(2, 8)
        //随机颜色
        a.style.height = Math.floor(50 + Math.random() * 500) + "px"
        //随机高度
    });
</script>

涛之雨

npc404 发表于 2022-7-28 00:09
这种方式有个缺点，图片的顺序是每列由上而下的，不是每行从左到右。以前想过有没有解决方案，不过最后没想 ...

没办法，主要想做的是自适应+纯css，每行从左到右其实也有问题，就是高度不一样很有可能某一个到第三个块了，另一个还是第一个瀑布流本来就适合做无序堆叠，但是这个确实有个很大的问题就是不适合动态添加。。。比较适合做数据的静态显示（数据个数和高度的变化会导致元素块漂移）

涛之雨

极品小猫 发表于 2022-7-28 15:08
说实话，我个人其实非常不喜欢瀑布流，但是瀑布流在展示和推广时，效果却非常好

特别是热加载（虽然我这个不是很适合做热加载，这个只适合做静态数据显示，动态修改会导致有可能新生成的元素在上面）

npc404

这种方式有个缺点，图片的顺序是每列由上而下的，不是每行从左到右。以前想过有没有解决方案，不过最后没想到放弃了

ysjd22

好厉害，学到了。

lnshijia

厉害，厉害

subney

宽度一致, 而且竖排的话, 直接使用flex-row布局就可以了

camyan

学到了，厉害

堕落ぁ狼

ggnb

学到了

imGz

感谢分享

hrpzcf

最近在学web，学习一下