column 属性实现图片瀑布流

最新推荐文章于 2023-09-08 08:59:17 发布

gyldzh

最新推荐文章于 2023-09-08 08:59:17 发布

阅读量541

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/u013803303/article/details/127745594

版权

<body>
    <div>
        <img src="" />
        <img src="" />
        <img src="" />
        <img src="" />
    </div>
</body>

1、图片的宽度固定，但是列可变

div {
    column-width: 200px; // 宽度200px
    column-gap: 2px; // 列之间间隔2px
}

2、 列是固定的个数，然后图片根据屏幕的宽度进行自适应缩放

div {
    column-count: 4; // 列的个数为4
    column-gap: 2px; // 列之间间隔2px
}

但这种方法会出现截断的现象。如果填充瀑布流布局容器的每一项内容的高度不是相同的，都会出现这种某一项在一列底部空间不足以显示被截断一部分显示在另一列的顶部。

这是由于column多列属性规定的每列高度都是相同的，所以空间不足就会被截断。毕竟column只是将一个容器分成多列显示，都是同一个容器，肯定要保证高度相同。

在这里插入图片描述

解决方法：将每个项添加 break-inside: avoid

拓展：

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

break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

break-inside支持属性相对少一些，同样的，我们目前只要关注下面两个属性值就好了：

auto (默认值) ：允许 (既不禁止也不强制) 在主框中插入任何中断 (页、列或区域)。

avoid-page ：避免主框中任何页的中断点

avoid-column ：避免主框中任何列的中断点

avoid-region 实验性避免原则框内的任何区域中断。

有时候，我们希望我们的条目一个元素一个元素都是独立的，前后都不断开，此时，就可以使用break-inside:avoid实现。

关注