你的位置:首页 > 软件开发 > Java > 瀑布流效果的一些收获

瀑布流效果的一些收获

发布时间:2016-03-24 18:00:07
瀑布流效果已经流行了很久,之前在项目中做了一次,今天页面改版又做了一次瀑布流的效果,中间又有了一些收获,谨记于此。  这个瀑布流效果是借鉴的网上一位大神写的代码,然后正好在项目中得到了应用。   1 function waterFall(mr, mb) { //mr水平方向的间距 ...

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

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

  

 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   }

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

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录