瀑布流效果的一些收获

Posted 2020-06-28

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

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

　　

  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 }

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

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