多列列表，不使用flex，转而使用瀑布流布局

先来看效果

废话不多说，直接上代码. 提供了一个简单的data格式，方便大家用

[
      {
        "name": "国度",
        "desc": ""
      },
      {
        "name": "名称",
        "desc": "Alan"
      }
    ]

一段简单的vue，不想搭vue项目可以换成html

<div class="waterfull">
        <div class="item" v-for="(i,index) in list" :key="index">
            <div class="item-title">{{ i.name }}</div>
            <div v-if="i.desc_type==1" class="item-desc">{{ i.desc }}</div>
            <div v-else-if="i.desc_type==2" class="item-desc">{{ i.desc.join('、') }}</div>
        </div>
    </div>

• 以下的css中
• *grid能使得看起来更规整，可以换成block看看之前的效果。
• item内部的第一个margin-top会导致第二列不会有margin-top,导致样式问题。
• break-inside: avoid;能保证item内的子元素不会被分开到两列。

.waterfull {
        column-count:2;
        column-gap: 20px;

        position: relative;
        margin-top: -274px;
        margin-left: 160px;
        width: 760px;
        text-align: left;
        .item {
            width: 100%;
            display: grid;
            break-inside: avoid;
            .item-title {
                /* margin-top: 12px; */
                margin-bottom: 8px;
                width: 80%;
                font-size: 14px;
                font-weight: 500;
            }
            .item-desc {
                margin-bottom: 12px;
                width: 80%;
                font-size: 14px;
                font-weight: 400;
                color: #8A8A98;
                word-wrap: break-word;
            }
        }
    }