瀑布流之我见
现在有很多网站都很流行瀑布流，一直想自己动手写一下，前段时间在网上找了两个关于瀑布流的插件，但是做出来感觉没太有成就感，所以痛下决心，决定自己写一个，所以开始少上网找资料，查找思路，最近终于在一番努力下写了出来，中间可能参考了很多人的代码以及实例，但是当自己真正的完成了以后发现还是比较有成就感的，在这里将他写出来，也供大家参考一下：
可能和别人写的有很多共同的地方，没办法思路就那么几种，而且我也参考了几位同人的代码和编程方式，如果感觉有相同的大家勿怪，在这里我主要参考了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>
理想中的生活是：醒醒，下班了！而现实中是 ：还不起来，上班迟到了！！多么痛的领悟
