Html
    Css
    Js

    
                        
*,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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

平铺型瀑布流 模拟操作

一个 简单 的平铺型瀑布流模拟例子

2
      Condition0
      2017/8/2 12:15:47
      有BUG
          liliangbo0
          2017/8/2 12:32:30

          说详细一点噻

      回复