纯CSS3怎么创建瀑布流布局?columns方法浅析

 4929

本篇教程我们来聊聊使用CSS3 column系列属性怎么实现瀑布流布局,感兴趣的朋友可以去了解一下~

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

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

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


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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style>
  6.             body,
  7.             html {
  8.                 position: relative;
  9.                 width: 100%;
  10.                 height: 100%;
  11.                 background: #4f000b;
  12.                 font-family: "PT Mono", monospace;
  13.             }
  14.  
  15.             .masonry {
  16.                 -moz-column-count: 1; 
  17.                 column-count: 1;   /* 设置列数 */
  18.                 -moz-column-gap: 0;
  19.                 column-gap: 0;  /* 设置列间距 */
  20.                 counter-reset: item-counter;
  21.             }
  22.              
  23.             /* 根据不同的屏幕宽度 设置不同的列数*/
  24.             @media screen and (min-width: 400px) {
  25.                 .masonry {
  26.                     -moz-column-count: 2;  
  27.                     column-count: 2;
  28.                 }
  29.             }
  30.  
  31.             @media screen and (min-width: 600px) {
  32.                 .masonry {
  33.                     -moz-column-count: 3;
  34.                     column-count: 3;
  35.                 }
  36.             }
  37.  
  38.             @media screen and (min-width: 800px) {
  39.                 .masonry {
  40.                     -moz-column-count: 4;
  41.                     column-count: 4;
  42.                 }
  43.             }
  44.  
  45.             @media screen and (min-width: 1100px) {
  46.                 .masonry {
  47.                     -moz-column-count: 5;
  48.                     column-count: 5;
  49.                 }
  50.             }
  51.  
  52.             .item {
  53.                 box-sizing: border-box;
  54.                 -moz-column-break-inside: avoid;
  55.                 break-inside: avoid;
  56.                 padding: 10px;
  57.                 counter-increment: item-counter;
  58.             }
  59.  
  60.             .item__content {
  61.                 position: relative;
  62.                 display: flex;
  63.                 flex-direction: column;
  64.                 justify-content: center;
  65.                 align-items: center;
  66.                 height: 220px;
  67.                 font-size: 40px;
  68.                 color: #360007;
  69.                 background: currentColor;
  70.                 box-sizing: border-box;
  71.                 color: #720026;
  72.             }
  73.  
  74.             .item__content:hover {
  75.                 background: #9b0034;
  76.             }
  77.  
  78.             .item__content:before {
  79.                 position: absolute;
  80.                 top: 0;
  81.                 left: 0;
  82.                 font-size: 13px;
  83.                 width: 2em;
  84.                 height: 2em;
  85.                 line-height: 2em;
  86.                 text-align: center;
  87.                 font-weight: bold;
  88.                 background-color: #222;
  89.                 content: counter(item-counter);
  90.             }
  91.  
  92.             .item__content--small {
  93.                 color: #ce4257;
  94.                 height: 100px;
  95.             }
  96.  
  97.             .item__content--small:hover {
  98.                 background: #d66274;
  99.             }
  100.  
  101.             .item__content--medium {
  102.                 color: #ffc093;
  103.                 height: 175px;
  104.             }
  105.  
  106.             .item__content--medium:hover {
  107.                 background: #ffd8bc;
  108.             }
  109.  
  110.  
  111.             .item__content--large {
  112.                 color: #ff7f51;
  113.                 height: 280px;
  114.             }
  115.  
  116.             .item__content--large:hover {
  117.                 background: #ff9d7a;
  118.             }
  119.         </style>
  120.     </head>
  121.  
  122.     <body>
  123.         <div class="masonry">
  124.             <div class="item">
  125.                 <div class="item__content">
  126.                 </div>
  127.             </div>
  128.             <div class="item">
  129.                 <div class="item__content item__content--small">
  130.                 </div>
  131.             </div>
  132.             <div class="item">
  133.                 <div class="item__content item__content--medium">
  134.                 </div>
  135.             </div>
  136.             <div class="item">
  137.                 <div class="item__content item__content--small">
  138.                 </div>
  139.             </div>
  140.             <div class="item">
  141.                 <div class="item__content item__content--medium">
  142.                 </div>
  143.             </div>
  144.             <div class="item">
  145.                 <div class="item__content">
  146.                 </div>
  147.             </div>
  148.             <div class="item">
  149.                 <div class="item__content item__content--large">
  150.                 </div>
  151.             </div>
  152.             <div class="item">
  153.                 <div class="item__content item__content--medium">
  154.                 </div>
  155.             </div>
  156.             <div class="item">
  157.                 <div class="item__content item__content--small">
  158.                 </div>
  159.             </div>
  160.             <div class="item">
  161.                 <div class="item__content">
  162.                 </div>
  163.             </div>
  164.             <div class="item">
  165.                 <div class="item__content item__content--large">
  166.                 </div>
  167.             </div>
  168.             <div class="item">
  169.                 <div class="item__content">
  170.                 </div>
  171.             </div>
  172.             <div class="item">
  173.                 <div class="item__content item__content--small">
  174.                 </div>
  175.             </div>
  176.             <div class="item">
  177.                 <div class="item__content item__content--large">
  178.                 </div>
  179.             </div>
  180.             <div class="item">
  181.                 <div class="item__content item__content--medium">
  182.                 </div>
  183.             </div>
  184.             <div class="item">
  185.                 <div class="item__content item__content--small">
  186.                 </div>
  187.             </div>
  188.             <div class="item">
  189.                 <div class="item__content item__content--medium">
  190.                 </div>
  191.             </div>
  192.             <div class="item">
  193.                 <div class="item__content">
  194.                 </div>
  195.             </div>
  196.             <div class="item">
  197.                 <div class="item__content item__content--small">
  198.                 </div>
  199.             </div>
  200.         </div>
  201.     </body>
  202. </html>


效果如下图所示:


6124950224af9.jpg


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

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

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

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

column-gap 属性:指定列间距。

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

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

上例中:

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

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

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

  1. .item {
  2.     counter-increment: item-counter;
  3. }
  4.  
  5. .item__content:before {
  6.     content: counter(item-counter);
  7. }


本文网址:https://www.zztuku.com/detail-9084.html
站长图库 - 纯CSS3怎么创建瀑布流布局?columns方法浅析
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐