瀑布流通常2种形式
1.固定n列（固定宽度），列中图片高度不等，如 花瓣网 http://huaban.com/all/
2.固定n行（固定高度），行中图片宽度不等，如 百度图片 http://image.baidu.com/search/index
列数可根据浏览器可视化窗口大小改变（也可固定）
原理：在#container定义等宽4列，每一列的高度自动，（ajax获取数据）然后在这4列添加图片；
获取每一列图片的最低（矮）位置，下一个图片（数据）添加到这个位置，并更新这列的高度。用一个4列数组来存放高度，获取最低高度的下标即可
当最低的那列到达可视区的底部，再次加载数据 (当前列的offsetHeight+offsetTop < scrollTop+clientHeight)
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>瀑布流</title>
6 <style>
7 * {margin: 0; padding: 0;}
8 #container { width: 1000px; border: 1px solid red; position: relative; margin: 50px auto 0; }
9 #container img { position: absolute; }
10 #loader { width: 100%; height: 60px; background: url(‘loader.gif‘) no-repeat center #FFF; position: fixed; bottom: 0; left: 0; display: none; }
11 </style>
12 <!-- ************* 新浪CDN ***********-->
13 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
14 <script>
15 /*
16 固定列：浮动布局
17 定位
18 */
19 $(function() {
20
21 var oContainer = $(‘#container‘);
22 //列数
23 var iCells = 0;
24 //每一列的宽度
25 var iWidth = 200;
26 //列的间隙宽
27 var iSpace = 10;
28 var iOuterWidth = iWidth + iSpace;
29 var sUrl = ‘http://www.wookmark.com/api/json/popular?callback=?‘;
30 //图片top
31 var arrT = [];
32 //图片距离left
33 var arrL = [];
34 var iPage = 0;
35 var iBtn = true;
36
37 function setCell() {
38 //设置 列数 = 可视区窗口宽度 / 每列宽度 向下舍整
39 iCells = Math.floor($(window).innerWidth() / iOuterWidth);
40 if (iCells < 3) {
41 iCells = 3;
42 } else if (iCells > 6) {
43 iCells = 6;
44 }
45 //alert(iCells);
46 oContainer.css(‘width‘, iCells * iOuterWidth) - 10;
47 }
48 setCell();
49
50 for (var i=0; i<iCells; i++) {
51 arrT[i] = 0;
52 arrL[i] = iOuterWidth * i;
53 }
54 //console.log(iCells);
55 //console.log(arrL);
56
57 function getData() {
58 if (!iBtn) {
59 return ;
60 }
61 iBtn = false;
62 iPage++;
63 $.getJSON(sUrl, {page:iPage}, function(jData) {
64 $(‘#loader‘).show();
65 $.each(jData, function(index, obj) {
66
67 var oImg = $(‘<img />‘);
68
69 //宽高
70 var iHeight = obj.height * (iWidth / obj.width);
71 oImg.css({
72 width : iWidth,
73 height : iHeight
74 });
75
76 var _index = getMin();
77 oImg.css({
78 left : arrL[_index],
79 top : arrT[_index]
80 });
81 arrT[_index] += iHeight + 10; //
82
83 oContainer.append(oImg);
84
85 var objImg = new Image();
86 objImg.onload = function() {
87 oImg.attr(‘src‘, this.src);
88 }
89 objImg.src = obj.preview;
90
91 setTimeout(function() {
92 $(‘#loader‘).hide();
93 },1000)
94
95 iBtn = true;
96
97 })
98
99 });
100 }
101 getData();
102 //arrT = [11,23,5,7];
103 // 获取 每一列最短 高度 的下标
104 function getMin() {
105 var v = arrT[0];
106 var _index = 0;
107
108 for (var i=1; i<arrT.length; i++) {
109 if (arrT[i] < v) {
110 v = arrT[i];
111 _index = i;
112 }
113 }
114 return _index;
115 }
116
117 //alert(getMin());
118
119 $(window).on(‘scroll‘, function() {
120 var _index =getMin();
121 var iH = $(window).scrollTop() + $(window).innerHeight();
122 document.title = iH + ‘:‘ + (arrT[_index] + 50);
123 if (arrT[_index] + 50 < iH) {
124 getData();
125 }
126
127 })
128
129 $(window).on(‘resize‘, function() {
130 var iLen = iCells;
131 setCell();
132 if (iLen == iCells) {
133 return ;
134 }
135 arrT = [];
136 arrL = [];
137 for (var i=0; i<iCells; i++) {
138 arrT[i] = 0;
139 arrL[i] = iOuterWidth * i;
140 }
141 oContainer.find(‘img‘).each(function() {
142
143 var _index = getMin();
144 /*$(this).css({
145 left : arrL[_index],
146 top : arrT[_index]
147 });*/
148 $(this).animate({
149 left : arrL[_index],
150 top : arrT[_index]
151 }, 1000);
152 arrT[_index] += $(this).height() + 10;
153
154 });
155 })
156
157
158
159 })
160 </script>
161 </head>
162
163 <body>
164 <div id="container"></div>
165 <div id="loader"></div>
166 </body>
167 </html>
可直接复制运行
时间： 2024-10-31 12:52:44