瀑布流效果的一些收获

　　瀑布流效果已经流行了很久，之前在项目中做了一次，今天页面改版又做了一次瀑布流的效果，中间又有了一些收获，谨记于此。

　　这个瀑布流效果是借鉴的网上一位大神写的代码，然后正好在项目中得到了应用。

 1 function waterFall(mr, mb) { //mr水平方向的间距，mb垂直方向的间距 2     var ocontainer = document.getElementById("container"); 3     if (ocontainer) { 4       var pageWidth = ocontainer.offsetWidth; 5     } else { 6       return false; 7     } 8     var oul = document.getElementById("blogList"); 9     var lis = oul.getElementsByTagName('article'); 10     var itemWidth = lis[0].offsetWidth + mr; //一个item的宽度 11     var cols = Math.floor(pageWidth / itemWidth); //列数 12     var liNum = lis.length; 13     var itemArr = []; 14     var fixedHeight = document.getElementById('fixedCell').offsetHeight; 15     for (var i = 0; i < lis.length; i++) { //把每个item的高度存入数组 16       itemArr.push(lis[i].offsetHeight); 17     } 18     console.log(itemArr); 19     var colArr = []; 20     if (liNum < cols) { 21       for (var i = 0; i < liNum; i++) { 22         if (lis[i].style != "" || lis[i].style != null || lis[i].style != undefined) { 23           lis[i].style.top = "0"; 24           lis[i].style.left = itemWidth * i + "px"; 25           lis[i].style.opacity = 1; 26           lis[i].style['-moz-opacity'] = 1; 27           lis[i].style['filter'] = "alpha(opacity=100)"; 28         } 29         colArr.push(itemArr[i]); 30         window.onscroll = null; 31         oul.style.height = _getMaxValue(colArr) + 80 + "px"; 32         $("#loading").hide(); 33       } 34     } else { 35       for (var i = 0; i < cols; i++) { //首行布局,把每列高度存入数组 36         if (lis[i].style != "" || lis[i].style != null || lis[i].style != undefined) { 37           if (i == cols - 1) { 38             lis[i].style.top = fixedHeight + mb + "px"; 39             colArr.push(itemArr[i] + fixedHeight + mb); 40           } else { 41             lis[i].style.top = "0"; 42             colArr.push(itemArr[i]); 43           } 44           lis[i].style.left = itemWidth * i + "px"; 45           lis[i].style.opacity = 1; 46           lis[i].style['-moz-opacity'] = 1; 47           lis[i].style['filter'] = "alpha(opacity=100)"; 48         } 49  50       } 51       for (var ni = cols; i < lis.length; i++) { //依次在最短列下布局 52         var shortIndex = _getMinIndex(colArr); 53         if (lis[i].style != "" || lis[i].style != null || lis[i].style != undefined) { 54           lis[i].style.top = colArr[shortIndex] + mb + "px"; 55           lis[i].style.left = itemWidth * shortIndex + "px"; 56           lis[i].style.opacity = 1; 57           lis[i].style['-moz-opacity'] = 1; 58           lis[i].style['filter'] = "alpha(opacity=100)"; 59         } 60         colArr[shortIndex] = colArr[shortIndex] + itemArr[i] + mb; 61       } 62  63       oul.style.height = _getMaxValue(colArr) + "px"; 64       //滚动加载 65       function scroll() { 66         $("#loading").show(); 67         var short = colArr[_getMinIndex(colArr)] + 100; 68         var page = $('#ajax_load_home_content_page_id').val(); 69         var scrollTop = document.documentElement.scrollTop > document.body.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; 70         if (scrollTop >= short - document.documentElement.clientHeight) { 71           //为防重复，先清除事件 72           window.onscroll = null; 73           $.ajax({ 74             …… 98           }); 99 100           //把ajax加载的元素添加进瀑布流101           var newLiNum = lis.length;102           for (var i = liNum; i < newLiNum; i++) {103             itemArr.push(lis[i].offsetHeight);104           }105           for (var i = liNum; i < newLiNum; i++) {106             var shortIndex = _getMinIndex(colArr);107             if (lis[i].style != "" || lis[i].style != null || lis[i].style != undefined) {108               lis[i].style.top = colArr[shortIndex] + mb + "px";109               lis[i].style.left = itemWidth * shortIndex + "px";110               lis[i].style.opacity = 1;111               lis[i].style['-moz-opacity'] = 1;112               lis[i].style['filter'] = "alpha(opacity=100)";113             }114             colArr[shortIndex] = colArr[shortIndex] + itemArr[i] + mb;115           }116           oul.style.height = _getMaxValue(colArr) + 80 + "px";117           liNum = newLiNum;118           window.onscroll = scroll;119         }120       }121       window.onscroll = scroll;122     }123   }

 1 function _getMaxValue(arr) { 2   var a = arr[0]; 3   for (var k in arr) { 4     if (arr[k] > a) { 5       a = arr[k]; 6     } 7   } 8   return a; 9 }10 11 function _getMinIndex(arr) {12   var a = arr[0];13   var b = 0;14   for (var k in arr) {15     if (arr[k] < a) {16       a = arr[k];17       b = k;18     }19   }20   return b;21 }

最后运行一下

 1 window.onload=function(){ 2   waterFall(20, 20); 3 } 4 var re; 5 window.onresize = function () { 6   clearTimeout(re); 7   re = setTimeout(function () { 8     waterFall(20, 20); 9   }, 50);10 }

　　到此基本的效果已经实现了。

　　需要注意的是，在线上测试时，遇到了一个问题，就是由于网速原因图片加载较慢，从而导致程序获取到的图片高度偏小，最后整个页面都重叠到了一块。解决办法就是通过预先得到的图片宽高算出图片的比例，然后我们根据瀑布流单个元素的宽度（图片在页面上的显示宽度）除以比例就得到了图片的高度。最后在加载的时候把高度给到图片就解决了这个问题。

原标题：瀑布流效果的一些收获

关键词：