CSS砌体布局：颠覆你认知的最疯狂的CSS最强布局，一行代码解决布局问题！

七夏发表于 2024-12-28 22:44:25

<h1>正式讲解</h1>
事情起因是这样的，大家在刷抖音，小红书等短视频平台、发现他们的布局是这样的**「瀑布流布局」**。
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibvWnM2SRTd274kKgpfO8MS31Yga15icxhP2YJjwECySibr7M61sYnaTNeszuCicdEbpq93J0CBUn9RJA/640?wx_fmt=webp&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
知道是瀑布流后，怎么做呢？我们第一反应是 <code>flex，grid</code>？是的这是大部分人的固态思维
我认为这极为麻烦，因为你甚至还需要用到大量的 <code>@meida，javascript</code>来解决细节问题，代码极其冗杂。
<blockquote>
全文的大前提：不考虑图片顺序。
</blockquote>
但是砌体布局使用 <code>columns</code>后仅仅一行代码就能完成上述的功能！！🤩，这你还不学起来？
我查阅了许多博客，发现大多数对于使用column仅仅也就是介绍了多列布局，但是！！！！它的作用不仅仅如此，至少在这种不考虑顺序的瀑布流布局下，我认为它是最强的。
砌体布局原理就是使用 <code>column</code>将元素分为不同的列，然后元素会自动填充空白的部分。但这还不是最特别的，列不是仅仅基于数量，而是可以根据每件物品的尺寸，自动进行响应式！！amazing！
<h1>Grid</h1>
这里代码我准备了很多图片，他们拥有不同的比例和尺寸
我们先来看grid布局怎么做的。
<pre><code>.layout-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
}
</code></pre>
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibvWnM2SRTd274kKgpfO8MS3XhLJAfTa54IhgXqd6WdBabc4a1eKPHU49Go3YjdPialHVAx6d3a63jg/640?wx_fmt=webp&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
缺点很明显，这种方法会将图片强制分为三列，但是中间会出现许多剩余部分，这极为丑陋，你需要通过其他方法来解决这些，这里就不深入说了，毕竟这不是重点。
<h1>Flex</h1>
ok，让我们来看看flex怎么做
<pre><code>img {
 width: 100%;
 margin-bottom: 1em;
}

.layout-container {
 display: flex;
 /* 允许换行，但是图像扭曲了 */
 flex-wrap: wrap;
}
</code></pre>
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibvWnM2SRTd274kKgpfO8MS38T8amjXkD7nZmCa2gjVHrH8oksxl9iavX2MQ3M3X7R7PTFQdzrQiaGNw/640?wx_fmt=webp&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
我们可以发现图片占满了整个屏幕
修复方法
<pre><code>img {
 width: 100%;
 margin-bottom: 1em;
 /* 只需要添加对象修复覆盖即可 */
 max-width: 300px;
 object-fit: cover;
}

.layout-container {
 display: flex;
 flex-wrap: wrap;
}
</code></pre>
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibvWnM2SRTd274kKgpfO8MS3hRHaQuibv8dQwO3mjALfUUNAB6dccfnTVjscoL9gUZfXqvUAWsZYTJw/640?wx_fmt=webp&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
修复后。间隔消失，并且整齐排列，但是发现很多图片缺了一块（比如第一行第三列），这不是我们要的效果，我们要的是保留图片的原比例，
<h1>砌体布局：columns-visibility！</h1>
重头戏来了，砌体布局！
我们只需要要一行代码便能完美解决这个问题
<code>column-count</code>
<pre><code> img {
 width: 100%;
 margin-bottom: 1em;
}

.layout-container {
 column-count: 3;
}
</code></pre>
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibvWnM2SRTd274kKgpfO8MS3tQDFknyZAEFFAdTDu6DChGgVKPMxovFm4xO5AicnLfaSFzPUSQl7Z3w/640?wx_fmt=webp&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
是的你没看错，我们仅仅用了这一行代码，便解决了这个问题。<code>column-count: 3</code>:把图片分为三列，在保持图片比例的情况下，又能填充空白部分。
但是细节的大佬就发现了，它不是响应式的，那不炸了吗。
我们用 <code>@media</code>就能解决了，你以为我会用吗？😡那岂不是不又要写一堆@media来适配，这违背了我写这篇文章的目的，告诉你，不需要！！！😏一行代码搞定！
我们先看@media怎么实现🚀
<pre><code> @media screen and (max-width: 600px) {
 .layout-container {
 column-count: 2;
 }
}
</code></pre>
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_gif/lCQLg02gtibvWnM2SRTd274kKgpfO8MS3jr2j7qCkgWVrqPwnZKcLBderHGWxbFdMVhmb8VlFsMYnllwIMohNkA/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="图片" />
可以发现的确解决了响应式的问题。
Now😍！睁开你们的眼睛👀，一行代码写完。
<pre><code>.layout-container {
 columns: 300px;
}
</code></pre>
<code>columns: 300px</code> 将列设置为300像素，系统按300像素划分列，自动进行响应式布局，如果下一张图片给它剩的位置不够，那么就会自动到下一行去，并且剩余的空间将会自动被填满。
Perfect！😄这种布局方式简直太爽了。🚀🚀
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_gif/lCQLg02gtibvWnM2SRTd274kKgpfO8MS3ibswIUcQDGlzXeEcLtnGqtPTfgYl91gwPUTIN6yc2jpIfNCXwjmaG4g/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="图片" />
嗯哼😄，又有大佬发现了🚀，将浏览器最大化后，图片就会按照300像素划分列，从而一行铺满。
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibvWnM2SRTd274kKgpfO8MS3jqksE3q9ekN5eO7h2COJ16KPobAADibWHxQwtcEyyeqhtqLvXvGibISw/640?wx_fmt=webp&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
如果我们既想要响应式效果又想要指定行列呢？🤔（既要又要？哪有这么好的事情）
其实有的🔥，也是一行代码，诸君且看我如何操作。
<pre><code>.layout-container {
 columns: 300px 3;
}
</code></pre>
<code>columns: 300px 3</code>是简写，表示在按照300像素的基础上，强行按照3列划分。
吼吼吼，发现变成三列了！我们也发现，它依然是响应式的！！amazing！！🤩
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibvWnM2SRTd274kKgpfO8MS3VKutrHILAwsZ6qZZeNabDkgHFIcNVHq8yI6SC5fiaBrVs8ujNWtsSgQ/640?wx_fmt=webp&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_gif/lCQLg02gtibvWnM2SRTd274kKgpfO8MS3PI4tuCKfMOoVCRHzuZ2s5IlAM4mqraqjflkBrRRtfqB6Vic4ghibjCOg/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1" alt="图片" />
<h1>缺点</h1>
有缺点吗，当然有
<blockquote>
因为它是从上往下排序，如果我们需要一些动态加载图片的业务，那么新加入的图片将不会加入页面的最低端，不符合我们的业务需求。如果你的网站不需要考虑图片顺序，我个人认为这种方法是完美的。
</blockquote>
<blockquote>
注意，当你在包含太多元素的列表中使用 columns-visibility 时，它会导致布局和渲染计算不断进行，这会使网站卡顿，性能不佳。通常，对于大型列表，程序员不会使用 container-visibility，最流行的两个选项是分页或使用延迟加载。
</blockquote>
<h1>兼容性</h1>
关于columns-visibility的兼容性不用担心，此功能已非常完善，适用于多种设备和浏览器版本。自2017 年 3 月起，该功能已在各种浏览器中可用。
它并非新特性，只是很少人这么用而已
这里我就给大家展示我文中提到的两个属性的兼容性了🚀。
<h2>column-count</h2>
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibvWnM2SRTd274kKgpfO8MS3T5jmWVjAmHibE2GWU0deWeULblJhObhOGbqKeIMdfVW2QTAYL0Y8RoQ/640?wx_fmt=webp&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibvWnM2SRTd274kKgpfO8MS3bkgpewK6lCQMnxUktJNWLtHkgLNib4EIkUbTfG85233WibHo6tmGTibkw/640?wx_fmt=webp&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
<h2>columns</h2>
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibvWnM2SRTd274kKgpfO8MS3ZhCveKCUlF6ysuTEWoYmaib7q6C77A2xpz2AgaWsq5nfiapMB6IBficzg/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibvWnM2SRTd274kKgpfO8MS356bJmVhjvX0rXNZ8BoB56FEjPb7bwreuoaK6a5WklettASDkMxMTKw/640?wx_fmt=webp&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_jpg/lCQLg02gtibvWnM2SRTd274kKgpfO8MS3VtdNPcelVE2dWqg0GnyLr3WZG1D9fR4by5nf4x8BOVibE7TCJWlibnBg/640?wx_fmt=webp&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />

China 发表于 2024-12-30 11:04:10

喜欢图1

七夏发表于 2024-12-30 11:07:01

China 发表于 2024-12-30 11:04
喜欢图1

你是喜欢小姐姐吧😂

打不倒的肥猫 发表于 2024-12-30 12:08:58

不会代码哎。。。。。。。。。

页: [1]

3BBS's Archiver

CSS砌体布局：颠覆你认知的最疯狂的CSS最强布局，一行代码解决布局问题！