1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style>
* {
padding:0;
margin:0;
}/*好孩子别用这个*/
html {
height:100%;
}
body {
height:100%;
}
img {
border:0;
}
div.wrap {
width:100%;
margin:0 auto;
overflow:hidden;
position:relative;
background:#DDD;
}
div.wrap div {
width:220px;
padding:4px;
border:1px solid #000;
float:left;
}
div.wrap div h3 {
line-height:35px;
}
div.wrap div img {
width:220px;
}
div.wrap div p {
padding:5px;
line-height:20px;
}
div.wrap div span {
color:#F00;
}
</style>
<script>
window.onload = function() {
waterFall("wrap")
}//
window.onresize = function() {
waterFall("wrap")
}

function waterFall(element,space,children) {
if(!element) return ;
space = space || 20 ;
children = children || "div" ; //前三行默认设置，分别为外框元素id，上下留白，子元素标签名(子元素标签名使用太多或出错)
var wrap = document.getElementById(element) ;
var water = wrap.getElementsByTagName(children) ;
var spaceWidth = water[0].offsetWidth ; //获取子元素宽度(offsetWidth会获取块级元素的padding和border)
var wrapWidth = wrap.offsetWidth ; //获取外框元素宽度
var colNum = Math.floor(wrapWidth/spaceWidth) ; //计算获取外框元素所能承受列数
var padding = Math.floor((wrapWidth - colNum*spaceWidth)/(colNum+1)) ; //计算外框元素剩余宽度并计算左右留白
var column = new Array() ;
var length = water.length ;
var maxHeight = 0 ;
for(var i=0;i<colNum;i++) { //初始化数组来计算各列初始top值和left值
column[i] = new Array() ;
column[i].top = space ;
column[i].left = (spaceWidth * i)+padding*(i+1) ; //计算各列距离左侧距离
}
for(var i=0;i<length;i++) { //遍历所有子元素及瀑布流布局
var index = i+1 ; //计算该子元素属于第几列
if(index%colNum==0) {
sub = colNum ;
} else {
sub = index%colNum ;
}
_this = water ;
_this[i].style.position = "absolute" ;
_this[i].style.top = column[sub-1].top + "px" ;
_this[i].style.left = column[sub-1].left + "px" ;
column[sub-1].top += _this[i].offsetHeight + space ; //计算各列最新高度以便赋值
}

for(var i=0;i<colNum;i++) { //获取瀑布流整体布局高度
if(column[i].top > maxHeight) maxHeight = column[i].top ;
}
wrap.style.height = maxHeight+"px" ; //给外框元素赋值以防止出现子元素溢出外框元素
}

//希望能帮助到大家哈，我一开始使用的事Jquery，但是考虑瀑布流比较消耗浏览器内存，就改成原生javascript了，滚动到浏览器底部ajax取值做瀑布流也灭做，等到项目到了再说吧
</script>
</head>
<body>
<div class="wrap" id="wrap">
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
</div>
</body>
</html>