瀑布流之我見

時間 2019-11-19

原文原文鏈接

如今有不少網站都很流行瀑布流，一直想本身動手寫一下，前段時間在網上找了兩個關於瀑布流的插件，可是作出來感受沒太有成就感，因此痛下決心，決定本身寫一個，因此開始少上網找資料，查找思路，最近終於在一番努力下寫了出來，中間可能參考了不少人的代碼以及實例，可是當本身真正的完成了之後發現仍是比較有成就感的，在這裏將他寫出來，也供你們參考一下：javascript

可能和別人寫的有不少共同的地方，沒辦法思路就那麼幾種，並且我也參考了幾位同人的代碼和編程方式，若是感受有相同的你們勿怪，在這裏我主要參考了http://www.cnblogs.com/NNUF/archive/2012/09/10/2679466.html這位仁兄的瀑布流的絕對定位的寫法，我主要改進的地方是把它按高低加載排序，它的寫法主要是從左往右每一列反覆循環添加，可是因爲沒有作高低的排序加載，因此這樣形成有的列可能特別長，有的可能特別段，因此在此基礎上我加入本身的想法略做修改，各位看以前能夠先看看這位仁兄的寫法，我在這裏就不在講解那些思路和細節問題，在這裏牢牢貼出代碼和demo，供你們參考css

  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

理想中的生活是：醒醒，下班了！而現實中是：還不起來，上班遲到了！！多麼痛的領悟html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。