*,body {
padding:0;
margin:0;
}
.container {
width:100%;
position:relative;
}
.title {
margin:3em auto;
text-align:center;
}
.waterfall-content {
position:relative;
overflow:hidden;
}
.waterfall-item {
float:left;
position:relative;
width:23%;
margin-right:2.666666666%;
overflow:hidden;
border:1px solid #ccc;
border-radius:4px;
padding:1em;
margin-bottom:1em;
}
.waterfall-item:nth-child(3n) {
margin-right:0;
}
.waterfall-item>img {
width:100%;
max-width:100%;
}
.get-more-line {
position:relative;
text-align:center;
}
.get-more-line a {
padding:10px;
width:49%;
background-color:#f7f7f7;
display:inline-block;
font-size:16px;
color:#999;
text-decoration:none;
}
.get-more-line:before {
width:22%;
top:25px;
left:0;
display:block;
position:absolute;
height:1px;
background-color:#ccc;
content:'';
}
.get-more-line:after {
width:22%;
top:25px;
right:0;
display:block;
position:absolute;
height:1px;
background-color:#ccc;
content:'';
}
.disabled {
cursor:not-allowed;
}
一个 简单 的平铺型瀑布流模拟例子