瀑布流之我见

现在有很多网站都很流行瀑布流，一直想自己动手写一下，前段时间在网上找了两个关于瀑布流的插件，但是做出来感觉没太有成就感，所以痛下决心，决定自己写一个，所以开始少上网找资料，查找思路，最近终于在一番努力下写了出来，中间可能参考了很多人的代码以及实例，但是当自己真正的完成了以后发现还是比较有成就感的，在这里将他写出来，也供大家参考一下：

可能和别人写的有很多共同的地方，没办法思路就那么几种，而且我也参考了几位同人的代码和编程方式，如果感觉有相同的大家勿怪，在这里我主要参考了http://www.cnblogs.com/NNUF/archive/2012/09/10/2679466.html这位仁兄的瀑布流的绝对定位的写法，我主要改进的地方是把它按高低加载排序，它的写法主要是从左往右每一列反复循环添加，但是由于没有做高低的排序加载，所以这样造成有的列可能特别长，有的可能特别段，所以在此基础上我加入自己的想法略作修改，各位看之前可以先看看这位仁兄的写法，我在这里就不在讲解那些思路和细节问题，在这里紧紧贴出代码和demo，供大家参考

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head runat="server">
  4     <title>无标题页</title>
  5     <style type="text/css">
  6         html, body { height: 100%; /*background: url("/images/brick.jpg") repeat fixed;*/}
  7         html, body, #warp p { margin: 0; padding: 0; }
  8         #warp { margin: 20px auto; position: relative; min-height: 1000px; }
  9         #warp .cell { padding: 10px; border: 1px solid #ccc; box-shadow: 2px 2px 5px #ccc; overflow: hidden; background:white; }
 10         #warp .cell a { text-decoration: none; color: #878787; font: 14px/1.5em Microsoft YaHei; }
 11         img { border: none; }
 12     </style>
 13 
 14     <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
 15 
 16     <script type="text/javascript">
 17         var data = [
 18         { imgUrl: 'images/01.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位01', height: 273 },
 19         { imgUrl: 'images/02.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位02', height: 144 },
 20         { imgUrl: 'images/03.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位03', height: 168 },
 21         { imgUrl: 'images/04.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位04', height: 275 },
 22         { imgUrl: 'images/05.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位05', height: 288 },
 23         { imgUrl: 'images/06.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位06', height: 272 },
 24         { imgUrl: 'images/07.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位07', height: 285 },
 25         { imgUrl: 'images/08.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位08', height: 282 },
 26         { imgUrl: 'images/09.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位09', height: 190 },
 27         { imgUrl: 'images/10.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位10', height: 236 },
 28         { imgUrl: 'images/11.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位11', height: 225 },
 29         { imgUrl: 'images/12.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位12', height: 264 },
 30         { imgUrl: 'images/13.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位13', height: 144 },
 31         { imgUrl: 'images/14.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位14', height: 192 },
 32         { imgUrl: 'images/15.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位15', height: 343 }
 33     ];
 34         var waterFull = function(obj) {
 35             var id = obj.id,
 36             picWidth = obj.picWidth || 190,                     //图片宽度
 37             columnPadding = obj.columnPadding || 10,            //列的padding值
 38             columnBorder = obj.columnBorder || 1,               //列的边框值
 39             columnMarginLeft = obj.columnMarginLeft || 20,      //列的margin值
 40             //一个格子的总宽度
 41              cellClientWidth = picWidth + columnPadding * 2 + columnBorder * 2,
 42 
 43              obody = document.getElementsByTagName("body")[0],
 44              owarp = document.getElementById(id),
 45             //记录当前插入的格子数量
 46             nowNum = 0,
 47             //存储每一个模块
 48             cells = [];
 49             //记录每一列的高度
 50             lenArr = [];
 51 
 52             //获取数字数组最小值的索引
 53             function getMinKey(arr) {
 54                 var a = arr[0];
 55                 var b = 0;
 56                 for (var k in arr) {
 57                     if (arr[k] < a) {
 58                         a = arr[k];
 59                         b = k;
 60                     }
 61                 }
 62                 return b;
 63             }
 64             //获取列数
 65             function getColumnNum() {
 66                 var columnNum = Math.floor(obody.clientWidth / (cellClientWidth + columnMarginLeft));
 67                 owarp.style.width = columnNum * (cellClientWidth + columnMarginLeft) - columnMarginLeft + 'px';
 68                 return columnNum;
 69             }
 70 
 71             function init() {
 72                 for (var x = 0; x < getColumnNum(); x++) {
 73                     lenArr[x] = 0;
 74                 }
 75             }
 76 
 77             //创建格子
 78             function createCell(left, top, link, imgUrl, imgHeight, title) {
 79                 var cssText = 'position:absolute;left:' + left + 'px;top:' + top + 'px';
 80                 var innHTML = '<a href="' + link + '" target="_blank"><img src="' + imgUrl + '" alt="' + title + '" height="' + imgHeight + 'px"><p class="title">' + title + '</p></a>';
 81                 var div = document.createElement('div');
 82                 div.className = 'cell';
 83                 div.style.cssText = cssText;
 84                 div.innerHTML = innHTML;
 85                 return div;
 86             }
 87             //插入数据
 88             function insert(data) {
 89                 var fragElement = document.createDocumentFragment();
 90                 if (data.length > 0) {
 91                     for (var i = 0, n = data.length; i < n; i++) {
 92                         var cell = createCell(-9999, -9999, data[i].link, data[i].imgUrl, data[i].height, data[i].title);
 93                         fragElement.appendChild(cell);
 94                         cells.push(cell);
 95                     }
 96                     owarp.appendChild(fragElement);
 97                 }
 98                 //插入后再排列
 99                 sort();
100             }
101             //排列
102             function sort() {
103                 var num = getColumnNum(), left, top, column;
104                 //nowNum的作用是不让已经加载的数据重新计算定位排列
105                 for (var j = nowNum, k = cells.length; j < k; j++, nowNum++) {
106                     top = 0;
107                     if (j == 0) {
108                         init();
109                     }
110                     column = getMinKey(lenArr);
111                     if (j < num) {
112                         //第一行列top的值为0
113                         cells[j].style.top = '0px';
114                         
115                     }
116                     else {
117                         top = lenArr[column] + columnMarginLeft;
118                         cells[j].style.top = top + 'px';
119                     }
120                     lenArr[column] = top + cells[j].offsetHeight;
121                     left = column * (cellClientWidth + columnMarginLeft);
122                     cells[j].style.left = left + 'px';
123                 }
124             }
125             //重新排列
126             function resort() {
127                 //设置nowNum=0即可重排
128                 nowNum = 0;
129                 //重新排序
130                 sort();
131             }
132 
133             return {
134                 insert: insert,
135                 resort: resort
136             }
137 
138         }
139 
140         //判断是否浏览器底部
141         function isFloor() {
142             //
143             var height = document.documentElement.scrollHeight || document.body.scrollHeight;
144             // 获取页面卷去的高度
145             var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
146             // 获取页面可视区域宽度
147             var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
148             if (scrollTop + clientHeight > height - 50) {
149                 return true;
150             }
151             return false;
152         }
153 
154         $(function() {
155             var myWaterFull = waterFull({ id: 'warp' });
156             myWaterFull.insert(data);
157             var re;
158             $(window).scroll(function() {
159                 if (isFloor()) {
160                     myWaterFull.insert(data);
161                 }
162             });
163             $(window).resize(function() {
164                 clearTimeout(re);
165                 re = setTimeout(function() { myWaterFull.resort(); }, 200);
166             });
167         });
168 
169     </script>
170 
171 </head>
172 <body>
173     <form id="form1" runat="server">
174     <div id="warp">
175     </div>
176     </form>
177 </body>
178 </html>

View Code

理想中的生活是：醒醒，下班了！而现实中是：还不起来，上班迟到了！！多么痛的领悟