简单瀑布流实现

瀑布流通常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>

可直接复制运行