如何使用纯CSS3实现瀑布流布局，有什么要注意

发布时间：2023-09-20 09:34:21 所属栏目：语言来源：

导读：在日常操作或是项目的实际应用中，有不少朋友对于“CSS制作瀑布流布局方法是什么，有什么要注意”的问题会存在疑惑，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴

在日常操作或是项目的实际应用中，有不少朋友对于“CSS制作瀑布流布局方法是什么，有什么要注意”的问题会存在疑惑，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

我们提到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 {
               background: #9b0034;
           }

           .item__content:before {
               position: absolute;
               top: 0;
               left: 0;
               font-size: 13px;
               width: 2em;
               height: 2em;
               line-height: 2em;
               text-align: center;
               font-weight: bold;
               background-color: #222;
               content: counter(item-counter);
           }

           .item__content--small {
               color: #ce4257;
               height: 100px;
           }

           .item__content--small:hover {
               background: #d66274;
           }

           .item__content--medium {
               color: #ffc093;
               height: 175px;
           }

           .item__content--medium:hover {
               background: #ffd8bc;
           }

           .item__content--large {
               color: #ff7f51;
               height: 280px;
           }

           .item__content--large:hover {
               background: #ff9d7a;
           }
       </style>
   </head>

   <body>
       <div class="masonry">
           <div class="item">
               <div class="item__content">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--small">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--medium">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--small">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--medium">
               </div>
           </div>
           <div class="item">
               <div class="item__content">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--large">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--medium">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--small">
               </div>
           </div>
           <div class="item">
               <div class="item__content">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--large">
               </div>
           </div>
           <div class="item">
               <div class="item__content">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--small">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--large">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--medium">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--small">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--medium">
               </div>
           </div>
           <div class="item">
               <div class="item__content">
               </div>
           </div>
           <div class="item">
               <div class="item__content item__content--small">
               </div>
           </div>
       </div>
   </body>
</html>

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);
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!