-
Notifications
You must be signed in to change notification settings - Fork 4
/
index3.html
436 lines (428 loc) · 14.3 KB
/
index3.html
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ublue jQuery Waterfall - 蓝色梦想_bluesdream.com</title>
<meta name="keywords" content="蓝色梦想,梦幻神化,前端,前端开发,设计,网页设计,网页制作,web前端,web前端开发,蓝色,梦想,CSS,JavaScript,jQuery,html,html5,css3,bluesdream" />
<meta name="description" content="Ublue jQuery Waterfall" />
<link href="http://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet" type="text/css">
<style type="text/css">
*{margin:0px; padding:0px;}
body{ font:12px/20px "Electrolize","Microsoft YaHei",tahoma,Arial,sans-serif; color:#666; text-shadow:0 1px 0 #FFF; background:url(images/body_bg.png);}
ul,ol,li{ list-style:none;}
img{ vertical-align:middle;}
a{ color:#666; text-decoration:none;}
a:hover img{ opacity:.9;}
#waterfall{ margin:50px auto; position:relative; overflow:hidden;}
.picList{ width:222px; box-shadow:0 0 3px #CCC; background:#FFF; margin:0 6px 12px 6px; position:absolute; left:-999px; display:block;}
.picList:hover{ box-shadow:1px 1px 5px #BBB;}
.picList:hover .shareIcon{ display:block;}
.picList .shareIcon{ display:none; width:100px; height:24px; background:url(images/share_icon.png) no-repeat; cursor:pointer; position:absolute; top:11px; right:11px; z-index:2; opacity:.9;}
.picList .shareIcon:hover{ opacity:1;}
.picThumbnail{ border-bottom:1px solid #EEE;}
.picThumbnail a{ display:block; margin:11px; max-height:600px; overflow:hidden;}
.picThumbnail img{ max-width:200px; display: block;}
.picDescription{ padding:1px; text-align:center; padding:5px 10px; background:#F7F7F7; margin-top:1px;}
#loading{ width:50%; height:16px; margin:0 auto; padding:5px 0; background:#FFF; line-height:16px; font-size:14px; text-align:center; box-shadow:0 0 3px #CCC; position:relative; z-index:10;}
#loading img{ margin-top:-2px;}
.info{ line-height:20px; padding:10px 0; border-bottom:1px solid #E2E2E2; background:rgba(255,255,255,0.2); text-align:center;}
</style>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
/*!
* Ublue jQuery Waterfall
* Copyright (c) 2011, 梦幻神化
*
* 请保留此信息，如果您有修改或意见可通过网站给我留言
* http://www.bluesdream.com
*
* Create 2012.02.21
* Update 2012.10.18 ( 1.增加瀑布流高度的计算，修复嵌入网页时无法撑开父级区域的问题 2. 性能和代码结构优化 3.已知BUG修复 )
* Update 2013.06.03 ( 1.增加瀑布流可显范围的修改提示 2.增加初次加载时的loading效果 )
*/
function imgLoading(){ //图片加载loading(仅初始化时执行)
var loadingStatus = $("<div id=\"loading\"><img src=\"images/loading.gif\"> 图片正在加载中...</div>");
$("#waterfall").append(loadingStatus); //添加loading层
var loadCon = $(".picList"); //内容区域名称
var loadImg = loadCon.find("img"); //内容区域名称
var step =0;
var count = loadImg.length; //计算总的数量
loadImg.each(function(e){
$(this).load(function(){
step++
if ( step == count) {
loadingStatus.remove();
};
});
});
};
imgLoading();
function waterfall(){
var wfArea = $("#waterfall"); //显示区域名称
var wfList = $(".picList"); //内容区域名称
var wfWidth = wfList.outerWidth(true); //获取内容区域实际宽度（含Margin和Padding的值）
var wfArr = []; //创建数组，用来记录内容区域高度
var maxCol = Math.floor( $(window).width() / wfWidth ); //窗口的宽度除以内容区域宽度，并且向下取整（得出每行能放多少列）
// var maxCol = Math.floor( wfArea.width() / wfWidth ); //如果不想全屏展现，可以使用这行，根据#waterfall的容器宽度来判断
for(var i = 0; i < wfList.length; i++) { //根据内容区域数量进行循环
colHeight = wfList.eq(i).outerHeight(true); //获取每个内容区域的高度
if( i < maxCol ){ //如果i小于maxCol，那就说明是在一行里面（例如每行有4列，那就是4个为一组）
wfArr[i] = colHeight; //把每组内容区域的高度，放入到数组中
wfList.eq(i).css("top",0); //第一行Li的默认Top值为0
wfList.eq(i).css("left",i * wfWidth); //每个列的Left值就是当前列数*内容区域宽度
}else{
minHeight = Math.min.apply(null,wfArr); //获取数组中的最小值（也就是每行中，最小高度的那列）
minCol = getArrayKey(wfArr, minHeight); //最小的值对应的指针
wfArr[minCol] += colHeight; //加上新高度后更新高度值
wfList.eq(i).css("top",minHeight); //先得到高度最小的Li，然后把接下来的li放到它的下面
wfList.eq(i).css("left",minCol * wfWidth); //第i个列的左坐标就是i*列的宽度
}
};
var wfLastLayerT = parseInt(wfList.last().css("top")); //最后一个元素的Top值
var wfLastLayerH = wfList.last().outerHeight(true); //最后一个元素的高度
var wfAreaH = wfLastLayerT + wfLastLayerH + "px"; //显示区域的高度为 最后一个元素的Top值+自身高度
wfArea.css({ "width":wfWidth * maxCol,"height":wfAreaH }); //设置显示区域宽度和高度
};
function getArrayKey(s, v) { //使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个)
for( k in s ) {
if( s[k] == v) {
return k;
};
};
};
function wfLoadImg(){
var json = "js/json_load.js";
$.getJSON(json, function(data){
$.each(data,function(i){
var url=data[i].url;
var desc=data[i].desc;
var author=data[i].author;
var html = "<div class=\"picList\"><i class=\"shareIcon\"></i><div class=\"picThumbnail\"><a href=\"#\"><img src="+url+"></a></div><div class=\"picDescription\"><p>"+desc+"</p><p>"+author+"</p></div></div>"
$("#waterfall").append(html);
waterfall();
});
});
};
$(window).scroll(function () { //滚动到底部时加载
var wfLoadArea = 50; //为了更直观，这里加个变量。目的在于这里的参数，表示滚动条距离底部还有多少像素的时候加载
if( $(document).scrollTop() + $(window).height() > $(document).height() - wfLoadArea ){
wfLoadImg();
}
});
window.onload = function() { waterfall(); }; //当窗口改变时，执行函数
$(window).resize(function(){ //当窗口改变时，执行函数
waterfall();
});
});
</script>
</head>
<body>
<div class="info">
<p>Ublue jQuery Waterfall</p>
<p>By www.bluesdream.com <script src="http://s9.cnzz.com/stat.php?id=1734797&web_id=1734797" language="JavaScript"></script></p>
</div>
<div id="waterfall">
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img1.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img2.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img3.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img4.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img5.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img6.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img7.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img8.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img9.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img10.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img11.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img12.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img13.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img14.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img15.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img16.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img17.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img18.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img19.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img20.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img21.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img22.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img23.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img24.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img25.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img26.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img27.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img28.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img29.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
<div class="picList">
<i class="shareIcon"></i>
<div class="picThumbnail">
<a href="#"><img src="images/img30.jpg"></a>
</div>
<div class="picDescription">
<p>图片介绍和描述</p>
<p>作者：Bluesdream.com</p>
</div>
</div>
</div>
</body>
</html>