简易瀑布流

1.什么是瀑布流

视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

2.html代码

<div class="wrapper">

        <div class="item">1</div>

        <div class="item">2</div>

        <div class="item">3</div>

        <div class="item">4</div>

        <div class="item">5</div>

        <div class="item">6</div>

        <div class="item">7</div>

    </div>

3.css代码

 

<style>

            .wrapper {

      display: flex;

      /* 改变主轴方向 换行 */

      flex-flow: column wrap;

      width: 80%;

      height: 600px;

      /* 居中 */

      margin:0 auto;

      background-color: antiquewhite;

    }

    .wrapper .item {

      width: 100px;

      background-color:#2c6fdb;

      margin: 0 20px 20px 0;

      font-size: 2rem;

    }

    .item:nth-child(1)

    {

        height: 260px;

    }

    .item:nth-child(2)

    {

        height: 220px;

    }

    .item:nth-child(3)

    {

        height: 150px;

    }

    .item:nth-child(4)

    {

        height: 70px;

    }

    .item:nth-child(5)

    {

        height: 200px;

    }

    .item:nth-child(6)

    {

        height: 160px;

    }

    .item:nth-child(7)

    {

        height: 200px;

    }

    </style>