瀑布流布局

布局：

css：

.masonry {
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 500px) {
.masonry {
flex-direction: row;
}
}

.column {
display: flex;
flex-flow: column wrap;
width: 100%;
}
@media only screen and (min-width: 500px) {
.masonry .column {
width: 100%;
}
}
/*
.masonry .item {
box-sizing: border-box;
padding: 10px;
counter-increment: item-counter;
}*/
.masonry .item__content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
box-sizing: border-box;
color: #18314F;
}
/*.masonry {
display: flex;
flex-direction: column;
}

.masonry .column {
display: flex;
flex-flow: column wrap;
width: 100%;
}
*/

.masonry .column .item {
box-sizing: border-box;
counter-increment: item-counter;
padding:0px;
transition:all 0.3s;
}
.masonry .column .item:hover {
background-color:#e8e8e8;
transform:scale(1.05);
}