使用grid布局实现的图片瀑布流响应式布局

pure css grid for a waterfall layout

css, grid, waterfall, photo, picture

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 4337
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    display: grid;
    place-content: center;
    background: #111;
}
.waterfall {
    width: 80vw;
    margin: 10em 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 1em;
    grid-auto-flow: row dense;
    grid-auto-rows: 10vh;
}
.waterfall .item:nth-of-type(3n+1) {
    grid-row: auto / span 3;
}
.waterfall .item:nth-of-type(3n+2) {
    grid-row: auto / span 4;
}
.waterfall .item:nth-of-type(3n+3) {
    grid-row: auto / span 5;
}
.waterfall .item {
    overflow: hidden;
    -webkit-transform: rotate(-7.5deg);
    transform: rotate(-7.5deg);
    -webkit-filter: saturate(0) contrast(10) brightness(0.2);
    filter: saturate(0) contrast(10) brightness(0.2);
    transition: border 0.1s, -webkit-transform 0.2s;
    transition: transform 0.2s, border 0.1s;
    transition: transform 0.2s, border 0.1s, -webkit-transform 0.2s;
    box-sizing: border-box;
    border: 1em solid transparent;
}
.waterfall .item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    transition: all 0.3s;
}
.waterfall .item.inbound {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-filter: none;
    filter: none;
    border-bottom: 1px solid white;
}
.waterfall .item.inbound img {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}

HTML

pure css grid for a waterfall layout

css, grid, waterfall, photo, picture

编辑器支持Emmet

快捷键

pure css grid for a waterfall layout

css, grid, waterfall, photo, picture

使用CSS3 grid布局实现的花朵样式

一款使用CSS grid布局实现的简约日历控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：