瀑布流css写法（分栏）

最新推荐文章于 2022-09-21 17:39:00 发布

bingduYu

最新推荐文章于 2022-09-21 17:39:00 发布

阅读量259

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Yugoup/article/details/102454088

版权

css 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

前言

实现一个瀑布流页面需要合理的使用分栏column，我们先认识一下column有哪些属性

分栏

column-count（列数）

这个属性有两个属性值：number | auto

column-count:3;
-moz-column-count:3; /* Firefox /
-webkit-column-count:3; / Safari and Chrome */

column-gap（列与列之间的间隙）

column-gap:40px;
-moz-column-gap:40px; /* Firefox /
-webkit-column-gap:40px; / Safari and Chrome */

column-rule（指定列之间：宽度，样式和颜色）

column-rule-width: 4px;
column-rule-style: outset ;
column-rule-color: red;

|| 上面3个属性可以简写为
ps:可以省略width和color，但不能省略style

column-rule: 4px outset red;
-moz-column-rule: 4px outset red; /* Firefox /
-webkit-column-rule: 4px outset red; / Safari and Chrome */

column-span（元素跨越列数）

就是一个类似首字下沉的效果
这个属性有两个属性值：1 | all（火狐不支持all）

h2 { column-span: 1; }

在这里插入图片描述

**columns **（column-count 和 column-width 属性的简写形式）

如果只设置 column-count 属性，浏览器会严格生成指定数量的栏，不管宽度如何。

如果同时设置了 column-count 和 column-width，前者会作为最大栏数，后者会作为最小栏宽。

columns: 20em; /* 在保证最小宽度 20em 的前提下，自动设置栏数 /
column-width: 20em; / 同上 /
columns: 3; / 3 栏，自动设置宽度 /
column-count: 3; / 同上 /
columns: 3 20em; / 至多 3 栏，每栏宽度至少 20em */

分页符（break-inside）

这个属性有3个属性值：auto | avoid | inherit

auto：默认。如果必要则在元素内部插入分页符。
avoid：避免在元素内部插入分页符。
inherit：规定应该从父元素继承 page-break-inside 属性的设置。

使用了break-inside：avoid，可以完整展示
在这里插入图片描述
不使用break-inside：avoid，会出现一个box在窗口底部和顶部各展示一部分的情况

具体代码如下，直接可用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>瀑布流</title>
  <style>
    .waterfall {
      -moz-column-count: 4;
      /* Firefox */
      -webkit-column-count: 4;
      /* Safari 和 Chrome */
      column-count: 2;
      -moz-column-gap: 10px;
      -webkit-column-gap: 10px;
      column-gap: 10px;
    }

    /*一个内容层*/
    .item {
      padding: 10px;
      margin-bottom: 20px;
      /* -moz-page-break-inside: avoid; */
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
      border: 1px solid #000;
    }

    .co1 {
      width: 100%;
      height: 180px;
      background-color: red;
    }

    .co2 {
      width: 100%;
      height: 250px;
      background-color: rgb(134, 162, 185);
    }

    .co3 {
      width: 100%;
      height: 350px;
      background-color: rgb(143, 206, 62);
    }

    .co4 {
      width: 100%;
      height: 270px;
      background-color: rgb(255, 0, 170);
    }

    .co5 {
      width: 100%;
      height: 200px;
      background-color: rgb(111, 0, 255);
    }

    .co6 {
      width: 100%;
      height: 200px;
      background-color: rgb(49, 133, 10);
    }

    .co7 {
      width: 100%;
      height: 320px;
      background-color: rgb(161, 88, 170);
    }

    .co8 {
      width: 100%;
      height: 220px;
      background-color: rgb(68, 13, 45);
    }

    .co9 {
      width: 100%;
      height: 250px;
      background-color: rgb(255, 153, 0);
    }

    .co10 {
      width: 100%;
      height: 400px;
      background-color: rgb(0, 255, 191);
    }
  </style>
</head>

<body>
  <div>
    <div class="waterfall">
      <div class="item">
        <div class="co1"></div>
      </div>
      <div class="item">
        <div class="co2"></div>
      </div>
      <div class="item">
        <div class="co3"></div>
      </div>
      <div class="item">
        <div class="co4"></div>
      </div>
      <div class="item">
        <div class="co5"></div>
      </div>
      <div class="item">
        <div class="co6"></div>
      </div>
      <div class="item">
        <div class="co7"></div>
      </div>
      <div class="item">
        <div class="co8"></div>
      </div>
      <div class="item">
        <div class="co9"></div>
      </div>
      <div class="item">
        <div class="co10"></div>
      </div>
    </div>
</body>
</html>

bingduYu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流css写法（分栏）

前言实现一个瀑布流页面需要合理的使用分栏column，我们先认识一下column有哪些属性分栏column-count（列数）这个属性有两个属性值：number | autocolumn-count:3;-moz-column-count:3; /* Firefox /-webkit-column-count:3; / Safari and Chrome */col...
复制链接

扫一扫