瀑布流效果的一些收获
发布时间: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
(#换成@)。
删除差评:https://www.goluckyvip.com/tag/3780.html
迈星浏览器:https://www.goluckyvip.com/tag/37800.html
麦仓海外仓:https://www.goluckyvip.com/tag/37801.html
麦出海:https://www.goluckyvip.com/tag/37802.html
麦德顺海外仓:https://www.goluckyvip.com/tag/37804.html
麦多分 Maxthoven :https://www.goluckyvip.com/tag/37806.html
对话上海文化广场|音乐剧的剧场怎么做?:https://www.xlkjsw.com/news/90169.html
链接评论中图片排序规则:https://www.kjdsnews.com/a/1841014.html