【瀑布流】节点样式

节点样式 菜包 4年前 (2021-05-16) 0个评论 扫描二维码

H大分享的瀑布流节点样式,鉴于论坛不太好搜索,这里收录一下

瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局

使用效果

样式代码

把下面的代码复制到【偏好设置/自定义样式】里

.node[mystyle="瀑布流"] {
    > .node-child {
        column-count: 3; /*多列的列数*/
        column-gap: 15px;/*列间距*/
         
        > .node {
            box-shadow: 0 0px 3px 1px rgba(0, 0, 0, 0.15);
            break-inside: avoid;
            margin-bottom: 15px;
             
            .node-text {
                padding-left: 32px !important;
                margin-left: 0px !important;
                 
            }
        }
    }
}

下面一版是2列去边框的,个人比较喜欢

.node[mystyle="瀑布流2列"] { > .node-child { column-count: 2; /*多列的列数*/ column-gap: 15px;/*列间距*/ > .node { break-inside: avoid; margin-bottom: 15px; .node-text { padding-left: 32px !important; margin-left: 0px !important; } } } }

 

 

喜欢 (3)
[觉得文章不错,请站长喝咖啡]
分享 (0)

您必须 登录 才能发表评论!