CSS砌体布局:颠覆你认知的最疯狂的CSS最强布局🤡,一行代码解决布局问题!

10,308 阅读8分钟

前言

我敢说,这是整个掘金社区绝无仅有的讲解!关注我,将带你一步步颠覆你认识中的css

如果本文对你有帮助,请在评论区扣个666啥的,如果你不认同,也请大佬们提出您的意见🚀

我好知道我写的东西对大家有没有用或者说我可以凭借你们的反馈我好知道大家想要什么,我要去给大家带来什么,以及我能知道文章中哪里有缺陷。这样大家才能进步🌹。

不要忘了点赞和收藏以及关注,这是对我更新文章最大的动力。

我会持续更新劲爆的内容,颠覆整个掘金社区对css的认知。

先叠个保护壳:作者才大二能力有限,以下的东西都是自己琢磨的,各位大佬如果发现有不认同的地方,请大家轻点喷🙏

正式讲解

事情起因是这样的,大家在刷抖音,小红书等短视频平台、发现他们的布局是这样的瀑布流布局image.png 知道是瀑布流后,怎么做呢?我们第一反应是flex,grid?是的这是大部分人的固态思维

我认为这极为麻烦,因为你甚至还需要用到大量的@meida,javascript来解决细节问题,代码极其冗杂。

全文的大前提:不考虑图片顺序。

但是砌体布局使用columns后仅仅一行代码就能完成上述的功能!!🤩,这你还不学起来?

我查阅了许多博客,发现大多数对于使用column仅仅也就是介绍了多列布局,但是!!!!它的作用不仅仅如此,至少在这种不考虑顺序的瀑布流布局下,我认为它是最强的。

砌体布局原理就是使用column将元素分为不同的列,然后元素会自动填充空白的部分。但这还不是最特别的,列不是仅仅基于数量,而是可以根据每件物品的尺寸,自动进行响应式!!amazing!

Grid

这里代码我准备了很多图片,他们拥有不同的比例和尺寸

我们先来看grid布局怎么做的。

.layout-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

image.png 缺点很明显,这种方法会将图片强制分为三列,但是中间会出现许多剩余部分,这极为丑陋,你需要通过其他方法来解决这些,这里就不深入说了,毕竟这不是重点。

Flex

ok,让我们来看看flex怎么做

img {
      width: 100%;
      margin-bottom: 1em;
    }

    .layout-container {
      display: flex;
      /* 允许换行,但是图像扭曲了 */
      flex-wrap: wrap;
    }

image.png 我们可以发现图片占满了整个屏幕

修复方法

img {
      width: 100%;
      margin-bottom: 1em;
      /* 只需要添加对象修复覆盖即可 */
      max-width: 300px;
      object-fit: cover;
    }

    .layout-container {
      display: flex;
      flex-wrap: wrap;
    }

image.png 修复后。间隔消失,并且整齐排列,但是发现很多图片缺了一块(比如第一行第三列),这不是我们要的效果, 我们要的是保留图片的原比例,

砌体布局:columns-visibility!

重头戏来了,砌体布局!

我们只需要要一行代码便能完美解决这个问题

column-count

    img {
      width: 100%;
      margin-bottom: 1em;
    }

    .layout-container {
      column-count: 3;
    }

image.png 是的你没看错,我们仅仅用了这一行代码,便解决了这个问题。 column-count: 3:把图片分为三列,在保持图片比例的情况下,又能填充空白部分。

但是细节的大佬就发现了,它不是响应式的,那不炸了吗。 Recording%202024-12-21%20152457_converted.gif

我们用@media就能解决了,你以为我会用吗?😡那岂不是不又要写一堆@media来适配,这违背了我写这篇文章的目的,告诉你,不需要!!!😏一行代码搞定!

我们先看@media怎么实现🚀

    @media screen and (max-width: 600px) {
      .layout-container {
        column-count: 2;
      }
    }

Recording%202024-12-21%20153001_converted.gif 可以发现的确解决了响应式的问题。

Now😍!睁开你们的眼睛👀,一行代码写完。

.layout-container {
      columns: 300px;
    }

columns: 300px 将列设置为300像素,系统按300像素划分列,自动进行响应式布局,如果下一张图片给它剩的位置不够,那么就会自动到下一行去,并且剩余的空间将会自动被填满。

Perfect!😄这种布局方式简直太爽了。🚀🚀 Recording%202024-12-21%20153638_converted.gif

嗯哼😄,又有大佬发现了🚀,将浏览器最大化后,图片就会按照300像素划分列,从而一行铺满。

image.png

如果我们既想要响应式效果又想要指定行列呢?🤔(既要又要?哪有这么好的事情)

其实有的🔥,也是一行代码,诸君且看我如何操作。

.layout-container { 
      columns: 300px 3;
    } 

columns: 300px 3是简写,表示在按照300像素的基础上,强行按照3列划分。

吼吼吼,发现变成三列了!我们也发现,它依然是响应式的!!amazing!!🤩 image.png

Recording%202024-12-23%20070622_converted.gif

缺点

有缺点吗,当然有

因为它是从上往下排序,如果我们需要一些动态加载图片的业务,那么新加入的图片将不会加入页面的最低端,不符合我们的业务需求。如果你的网站不需要考虑图片顺序,我个人认为这种方法是完美的。

注意,当你在包含太多元素的列表中使用 columns-visibility 时,它会导致布局和渲染计算不断进行,这会使网站卡顿,性能不佳。通常,对于大型列表,程序员不会使用 container-visibility,最流行的两个选项是分页或使用延迟加载。

兼容性

关于columns-visibility的兼容性不用担心,此功能已非常完善,适用于多种设备和浏览器版本。自2017 年 3 月起,该功能已在各种浏览器中可用。

它并非新特性,只是很少人这么用而已

这里我就给大家展示我文中提到的两个属性的兼容性了🚀。

column-count

Snipaste_2024-12-23_06-05-13.png

Snipaste_2024-12-23_06-12-10.png

Snipaste_2024-12-23_06-04-54.png

columns

image.png

Snipaste_2024-12-23_06-17-59.png

Snipaste_2024-12-23_06-18-20.png

总结

感谢大家的观看,如果对您有帮助的话,请在评论区随便说两句吧,这对作者非常重要。

作者并非把文章当作笔记来写,而是当作教学。大家什么都不说,我不知道大家喜欢看什么js?css?react?后面也不知道更新啥了😭。也不知道自己的文章哪里有缺陷需要改正😭

已经提交到git仓库,欢迎大家来点starCSS-Master,CSS-tips: css黑科技

作者仅在掘金写文章,如需转载,请先经过作者同意,违者必究😡