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

布局,使用grid布局实现的图片瀑布流响应式布局"/>

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

CSS

语言：

CSSSCSS

确定

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);

}