css3 column实现卡片瀑布流布局的示例代码

下面是关于“CSS3 column实现卡片瀑布流布局的示例代码”的完整攻略。

一、CSS3 column介绍

1. 概述

CSS多列布局（CSS3 column）是CSS3中的一种新特性，可以让我们更方便地实现分栏布局，常用在报纸、杂志等排版较为复杂的场合。

2. column-count

column-count可以指定分栏数量，例如：

.container {
  column-count: 3;
}

上述代码将会把容器分成三栏。

3. column-gap

column-gap可用于设置栏与栏之间的间距，例如：

.container {
  column-count: 3;
  column-gap: 20px;
}

上述代码将会把栏间距设为20px。

4. column-width

column-width 可以设置每一栏的宽度，例如：

.container {
  column-width: 300px;
}

上述代码将会把每一栏宽度设为300px。

5. column-rule

column-rule可用于添加竖直方向的边框线，例如：

.container {
  column-rule: 1px solid #ccc;
}

上述代码将会在栏之间添加1像素宽的实线边框，颜色为#ccc。

二、CSS3 column实现卡片瀑布流布局

1. 布局代码

<div class="container">
  <div class="card">Card1</div>
  <div class="card">Card2</div>
  <div class="card">Card3</div>
  <div class="card">Card4</div>
  <div class="card">Card5</div>
  <div class="card">Card6</div>
  <div class="card">Card7</div>
  <div class="card">Card8</div>
  <div class="card">Card9</div>
  <div class="card">Card10</div>
  <div class="card">Card11</div>
  <div class="card">Card12</div>
  <div class="card">Card13</div>
  <div class="card">Card14</div>
  <div class="card">Card15</div>
  <div class="card">Card16</div>
  <div class="card">Card17</div>
  <div class="card">Card18</div>
</div>

上述代码中，我们设置了一个包含18个卡片的容器，每个卡片的内容都是“Card+序号”。

2. 样式代码

.container {
  column-count: 3;  /* 分成3栏 */
  column-gap: 20px;  /* 栏间距为20px */
}
.card {
  break-inside: avoid-column;  /* 禁止卡片内部被分栏 */
  margin-bottom: 20px;  /* 每个卡片之间的下边距为20px */
  padding: 20px;  /* 卡片内部内容与边框的间距为20px */
  border: 1px solid #ccc;  /* 卡片边框为1像素宽的实线边框，颜色为#ccc */
}

上述代码中，我们添加了一些样式来实现卡片瀑布流布局。首先我们把容器分成3栏，栏间距为20px；然后禁止卡片被分栏，从而保证每个卡片都在同一栏内；接着设置卡片之间的下边距为20px，使得每个卡片之间有一定间隙；最后添加了一些边框样式，让卡片看起来更美观。

3. 示例说明

我们可以通过修改样式来实现不同的布局效果，下面是两个示例：

示例一：设置栏宽

如果我们希望每一栏的宽度都相同，可以使用column-width属性。

.container {
  column-width: 300px;
  column-gap: 20px;  /* 栏间距为20px */
}

上述代码中，我们设置栏宽为300px，栏间距为20px，这样每一栏宽度都相同。

示例二：栏内元素排序

我们可以通过设置子元素的样式来实现在栏内元素的排序。

.card:nth-child(2n+1) {
  order: 2;
}

上述代码中，我们设置了第1、3、5等奇数卡片的order属性为2，让奇数卡片排在偶数卡片之后。这样可以让布局更加有趣。

以上是关于“CSS3 column实现卡片瀑布流布局的示例代码”的完整攻略。