平武建站

怎么用CSS3创建瀑布流布局

本篇内容介绍了“怎么用CSS3创建瀑布流布局”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

目前创新互联建站已为上千余家的企业提供了网站建设、域名、网站空间、网站托管、企业网站设计、青神网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

我们提到CSS响应布局的，就会想要使用Grid和Flexbox来实现，其实它们也有一些局限性。像瀑布流布局这种，就无法用它们来简单实现。

这其中的原因就是瀑布流一般来说都是宽度一致，但是高度是根据图片自适应的。并且图片的位置也是根据在上方图片的位置而定的。

那么如何使用纯CSS3实现瀑布流布局呢？我们可以利用CSS3 column系列属性！

下面我们就先直接上代码：

效果如下图所示：

怎么用CSS3创建瀑布流布局

ok，瀑布流布局实现了！那么下面分析一下上述代码，给大家介绍几个关键的css属性：

  • @media 查询：可以针对不同的屏幕尺寸设置不同的样式

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

  • column-count属性：指定某个元素应分为的列数。

  • column-gap 属性：指定列间距。

column-gap: length|normal;
length    一个指定的长度，将设置列之间的差距    
normal    指定一个列之间的普通差距。 W3C建议1EM值

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

    上例中：

.item { break-inside: avoid; box-sizing: border-box; padding: 10px; }

break-inside:avoid为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局。

  • counter-increment属性：递增一个或多个计数器值，通常用于counter-reset属性和content属性。例如上例中：

.item {
counter-increment: item-counter;
}

.item__content:before {
content: counter(item-counter);
}

“怎么用CSS3创建瀑布流布局”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


名称栏目：怎么用CSS3创建瀑布流布局
本文路径：http://pwwzsj.com/article/pdshod.html

其他资讯