本文实例讲述了js实现仿百度瀑布流的方法。分享给大家供大家参考。具体实现方法如下:
复制代码
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<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>仿百度图片瀑布流</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="js/jquery.min.js"></script> <style> *{margin:0; padding:0;} #container{ width: 1000px; border:1px solid #f00; margin: 50px auto; position: relative; } #container img{ position: absolute; } #loader{ width: 100%; height: 60px; background: url(loader.gif) no-repeat center; position: fixed; bottom: 0; left: 0; } </style> </head> <script type="text/javascript"> $(function(){ var oContainer=$('#container'); var oLoader=$('#loader'); var iWidth=200;//列宽 var iSpace=10;//列数 var iOuterWidth=iWidth+iSpace; var sUrl = 'localhost/api/json/popular?callback=?'; var iCell=0; var iPage=0; var arrL=[]; var arrT=[]; var iBtn=true; function setCells(){ iCell= Math.floor($(window).innerWidth()/iOuterWidth); if(iCell < 3){ iCell =3; } if(iCell >6){ iCell =6; } oContainer.css('width',iOuterWidth*iCell-iSpace); } setCells(); for(var i=0;i < iCell; i++){ arrL.push(i*iOuterWidth); arrT.push(0); } //console.log(arrL) getData() function getData(){ if(iBtn){ iBtn =false oLoader.show(); $.getJSON(sUrl,'page='+iPage,function(data){ $.each(data,function(i,obj){ var $img =$('<img>'); $img.attr('src',obj.preview); var iHeight= iWidth /obj.width * obj.height; var index=getMin(); $img.appendTo(oContainer); $img.css({width:iWidth,height: iHeight}); $img.css({top:arrT[index],left: arrL[index]}) arrT[index]+=iHeight +10; oLoader.hide(); }) iPage++; iBtn=true; }) } } $(window).on('resize',function(){ var iOldCell= iCell; setCells(); var iH = $(window).scrollTop()+$(window).innerHeight(); var iMinIndex= getMin(); if(arrT[iMinIndex]+oContainer.offset().top < iH){ getData(); } if(iOldCell == iCell) return ; arrT=[]; arrL=[]; for(var i=0;i < iCell; i++){ arrL.push(i*iOuterWidth); arrT.push(0); } var $img = oContainer.find('img'); $img.each(function(index,obj){ var index=getMin(); $(this).animate({top:arrT[index],left: arrL[index]}) arrT[index]+=$(this).height() +10; }) }) $(window).on('scroll',function(){ var iH = $(window).scrollTop()+$(window).innerHeight(); var iMinIndex= getMin(); if(arrT[iMinIndex]+oContainer.offset().top < iH){ getData(); } }) function getMin(){ var iv= arrT[0]; var _index=0; for(var i=0; i<arrT.length; i++){ if(arrT[i] < iv){ iv= arrT[i]; _index=i; } } return _index ; } }) </script> <body> <div id="top">仿百度图片瀑布流</div> <!--标题 e --> <div id="container"></div> <div id="loader"></div> <!--效果块 e --> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
最后
以上就是文艺绿草最近收集整理的关于js实现仿百度瀑布流的方法的全部内容,更多相关js实现仿百度瀑布流内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复