纯CSS实现瀑布流

css瀑布流

2023-10-04 19:38:05

一个纯CSS实现瀑布流的办法，一般的对于内容网站而言，每个内容块的宽度相同，纵列方向需要显示的内容量不确定，这个时候需要用到瀑布流布局。

效果如下：

关键代码：

↓ 会员用户可见内容 ↓

css 复制代码

.list {
    column-count: 2; /* 容器内容显示为两列 */
    column-gap: 10px; /* 间隔10px */
}

.list .item {
    height: 100px;
  /* 避免子元素换行 */
    break-inside: avoid;
    margin-bottom: 10px;
    background-color: #a1cbfa;
    border: 1px solid #4290e2;
    box-shadow: 0 2px 2px rgba(0, 90, 250, 0.05),
        0 4px 4px rgba(0, 90, 250, 0.05),
        0 8px 8px rgba(0, 90, 250, 0.05),
        0 16px 16px rgba(0, 90, 250, 0.05);
}

这个办法将内容强制分为两列，可能会导致左边是最新的内容，的内容较旧。正确的显示方式应当将最新发布的内容写在最顶部。可以结合简单的js代码，把后端请求到的内容根据奇偶重新排列即可。