瀑布流-一一网

这是我参与更文挑战的第2天，活动详情查看：更文挑战

以上图片来自B站CodingStartup起码课的瀑布流效果。

column

元素结构

<body>
  <div class="masonry">
    <div class="item">
      <img src="https://picsum.photos/360/460?random=1">
    </div>
      <div class="item">
      <img src="https://picsum.photos/360/520?random=2">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/420?random=3">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/420?random=4">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/480?random=5">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/500?random=6">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/500?random=7">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/400?random=8">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/440?random=9">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/420?random=10">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/500?random=11">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/460?random=12">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/480?random=13">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/440?random=14">
    </div>
    <div class="item">
      <img src="https://picsum.photos/360/420?random=15">
    </div>
  </div>
</body>
复制代码

样式代码

<style>
    body{
        margin: 0;
        padding: 10px;
    }
    .masonry{
        column-count: 4;
        column-gap:0;
    }
    .item{
        position: relative;
        padding: 5px;
        counter-increment: item-counter;
    }
    .item::after{
        position: absolute;
        background-color: #000;
        color: #fff;
        width: 24px;
        height: 24px;
        left: 5px;
        top: 5px;
        border-top-left-radius: 5px;
        content: counter(item-counter);
        text-align: center;
        line-height: 24px;
    }
    img{
        display: block;
        width: 100%;
        height: auto;
        border-radius: 5px;
    }
</style>
复制代码

其中主要是通过使用 column-count: 4; column-gap:0;这两个声明来实现分栏和栏间距的
知识点：
- column-count:规定元素被划分的列数
- column-gap:列与列之间的间距
- counter-increment: item-counter;:指定一个计算变量，从1开始
- counter(item-counter);调用计算变量在每个item元素中
- counter-reset: name:重置并创建一个新的计数变量

FlexBox

<style>
    body{
        margin: 0;
        padding: 0;
    }
    .masonry{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        flex-direction: column;
        height: 1000px;
    }
    .item{
        position: relative;
        width: 25%;
        padding: 5px;
        box-sizing: border-box;
        counter-increment: item-counter;
    }
    .item::after{
        position: absolute;
        height: 24px;
        width: 24px;
        background-color: #000;
        color: #fff;
        line-height: 24px;
        text-align: center;
        content: counter(item-counter);
        border-top-left-radius: 5px;
        left: 5px;
        top: 5px;
    }
    .item img{
        display: block;
        width: 100%;
        height: auto;
        border-radius: 5px;
    }
    .item:nth-child(4n+1){
        order: 1;
    }
    .item:nth-child(4n+2){
        order: 2;
    }
    .item:nth-child(4n+3){
        order: 3;
    }
    .item:nth-child(4n){
        order: 4;
    }
</style>
</head>
复制代码