css3 图片瀑布流

html

<div class="attachment-list">
    <div class="list attachment-item">
        <div class="item">
            <?= $content ?>
            <div class="title"><?= $val->name ?></div>
            <div class="url"><?= $val->url ?></div>
            <button class="btn btn-success attachment-copy" data-url="<?= Yii::$app->params['ossUrl'] . $val->url ?>"><?= Yii::t('backend', 'copy_url') ?></button>
        </div>
    </div>
</div>

css

.attachment-list  {
    padding: 20px;
}
.attachment-list .attachment-item {
    margin: 0 auto;
    column-count: 5;
    column-gap: 15px;
}
.attachment-list .attachment-item .item {
    margin-bottom: 10px;
    border: 1px solid #bdbdbd;
    break-inside: avoid;
}
.attachment-list .attachment-item .item .title {
    height: 35px;
    line-height: 35px;
    overflow: hidden;
    word-wrap: break-word;
    padding: 0 5px;
}
.attachment-list .attachment-item .item .url {
    height: 40px;
    line-height: 18px;
    overflow: hidden;
    word-wrap: break-word;
    padding: 0 5px;
}
.attachment-list .attachment-item .item img {
    width: 100%;
}
.attachment-list .attachment-item .item button {
    margin-bottom: 10px;
    margin-left: 10px;
}

主要属性： column-count、column-gap、break-inside

 

column-count： 将div分列

column-gap： 分列每列间隔

break-inside：描述了在多列布局页面下的内容盒子如何中断