站长图库向大家介绍了纯CSS3瀑布流布局,columns方法,CSS3瀑布流等相关知识,希望对您有所帮助
本篇教程我们来聊聊使用CSS3 column系列属性怎么实现瀑布流布局，感兴趣的朋友可以去了解一下~
我们提到CSS响应布局的，就会想要使用Grid和Flexbox来实现，其实它们也有一些局限性。像瀑布流布局这种，就无法用它们来简单实现。
这其中的原因就是瀑布流一般来说都是宽度一致，但是高度是根据图片自适应的。并且图片的位置也是根据在上方图片的位置而定的。
那么如何使用纯CSS3实现瀑布流布局呢？我们可以利用CSS3 column系列属性！
下面我们就先直接上代码：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> body, html { position: relative; width: 100%; height: 100%; background: #4f000b; font-family: "PT Mono", monospace; } .masonry { -moz-column-count: 1; column-count: 1; /* 设置列数 */ -moz-column-gap: 0; column-gap: 0; /* 设置列间距 */ counter-reset: item-counter; } /* 根据不同的屏幕宽度 设置不同的列数*/ @media screen and (min-width: 400px) { .masonry { -moz-column-count: 2; column-count: 2; } } @media screen and (min-width: 600px) { .masonry { -moz-column-count: 3; column-count: 3; } } @media screen and (min-width: 800px) { .masonry { -moz-column-count: 4; column-count: 4; } } @media screen and (min-width: 1100px) { .masonry { -moz-column-count: 5; column-count: 5; } } .item { box-sizing: border-box; -moz-column-break-inside: avoid; break-inside: avoid; padding: 10px; counter-increment: item-counter; } .item__content { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 220px; font-size: 40px; color: #360007; background: currentColor; box-sizing: border-box; color: #720026; } .item__content:hover { &