css3 瀑布流
zengwh 2018-09-27
body {
background-color: #f6f6f6;
}
.container {
width: 80%;
margin: 0 auto;
}
.waterfall {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-width: 24em;
-webkit-column-width: 24em;
column-width: 24em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
.pin {
padding: 1em;
margin: 0 0.125em 1em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
background: white;
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}
.pin img {
width: 100%;
padding-bottom: 1em;
margin-bottom: 0.5em;
border-bottom: 1px solid #cccccc;
}
