这篇文章给大家介绍的内容是关于瀑布流布局实现的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
index.html
waterfall layout @@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@@@##@@
wf.css
@CHARSET "UTF-8";*{margin:0;padding:0}#main{ position: relative; margin: 10px auto 0 auto;}.box{ float:left; padding: 0 0 15px 15px; }.pic{ border: 1px solid #ccc; padding: 10px;}.box img{ width: 200px; height: auto;}
wf.js
window.onload = function(){ waterfall(); //要加载的数据，暂时写一个固定数据 var dataInt = {"data":[{"src":'3.jpg'},{"src":'13.jpg'},{"src":'23.jpg'},{"src":'1.jpg'}]}; //一个判断拖动滚动条后是否加载新内容的方法 window.onscroll = function(){ if(checkScrollSlide()){ //将数据块渲染到当前页的尾部 for(var i = 0; i < dataInt.data.length;i++){ var parent = document.getElementById('main'); var newBox = document.createElement('p'); newBox.className = 'box'; parent.appendChild(newBox); var newPic = document.createElement('p'); newPic.className = 'pic'; newBox.appendChild(newPic); var newImg = document.createElement('img'); newImg.src = "./imgs/" + dataInt.data[i].src; newPic.appendChild(newImg); waterfall(); } } }}function waterfall(){ var parent = document.getElementById("main"); //写一个方法根据类名box，找到所有节点 var boxArr = getByClass(parent,'box'); //console.log(boxArr.length);//26，检验是否获取到 var bodyWidth = document.body.clientWidth; //document.body.clientWidth 窗口实时显示时的body的宽度 var colWidth = boxArr[0].offsetWidth;//box p的宽度 var cols = Math.floor(bodyWidth / colWidth); //给main p一个宽度，从而让显示内容不会随着浮动，改变布局 var mainWidth = colWidth * cols; parent.style.cssText = 'width:' + mainWidth + 'px;'; var colsHeight = [];//放列高度的数组 for(var i = 0; i < boxArr.length;i++){ var iBox = boxArr[i]; if(i < cols){ colsHeight.push(iBox.offsetHeight); }else{ var rArr = searchMin(colsHeight); var index = rArr[0]; var minH = rArr[1]; var left = parseInt(index * colWidth); var top = minH; iBox.style.position = "absolute"; iBox.style.left = left + 'px'; iBox.style.top = top + 'px'; colsHeight[index] += iBox.offsetHeight; } }}function getByClass(parent,clsName){ //用通配符获得prent下的所有标签节点 var allTags = document.getElementsByTagName("*"); var arr = new Array(); for(var i = 0; i < allTags.length;i++){ if(allTags[i].className == clsName){ arr.push(allTags[i]); } } return arr;}function searchMin(arr){ var min = arr[0]; var index = 0; for(var j = 0; j < arr.length; j++){ if(arr[j] < min){ min = arr[j]; index = j; } } return [index,min]; }function checkScrollSlide(){ var parent = document.getElementById('main'); var boxArr = getByClass(parent,'box'); var lastBox = boxArr[boxArr.length-1]; var lbHeight = lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2); console.log(lbHeight); var slideH = document.body.scrollTop || document.documentElement.scrollTop; console.log(slideH); var winH = document.body.clientHeight || document.documentElement.clientHeight; console.log(winH); var swHeight = slideH + winH; return (lbHeight < swHeight) ? true : false;}
相关文章推荐：
div标签：水平居中和垂直居中的实现（附代码）
css box-sizing属性（盒子模型）的用法介绍
以上就是瀑布流布局实现的代码的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1546495.html
微信扫一扫 
支付宝扫一扫 
