页面布局瀑布流的写法(原生js)

来源：互联网发布：托马斯游戏小游戏软件编辑：程序博客网时间：2024/05/29 13:34

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>瀑布流布局</title><link rel="stylesheet" type="text/css" href="css/style.css"/><script type="text/javascript" src="js/script.js" ></script></head><body><div id="main"><div class="box"><div class="pic"><img src="img/0.jpg"/></div></div><div class="box"><div class="pic"><img src="img/1.jpg"/></div></div><div class="box"><div class="pic"><img src="img/2.jpg"/></div></div><div class="box"><div class="pic"><img src="img/3.jpg"/></div></div><div class="box"><div class="pic"><img src="img/4.jpg"/></div></div><div class="box"><div class="pic"><img src="img/5.jpg"/></div></div><div class="box"><div class="pic"><img src="img/6.jpg"/></div></div><div class="box"><div class="pic"><img src="img/7.jpg"/></div></div><div class="box"><div class="pic"><img src="img/8.jpg"/></div></div><div class="box"><div class="pic"><img src="img/9.jpg"/></div></div><div class="box"><div class="pic"><img src="img/10.jpg"/></div></div><div class="box"><div class="pic"><img src="img/11.jpg"/></div></div><div class="box"><div class="pic"><img src="img/12.jpg"/></div></div><div class="box"><div class="pic"><img src="img/13.jpg"/></div></div><div class="box"><div class="pic"><img src="img/14.jpg"/></div></div><div class="box"><div class="pic"><img src="img/15.jpg"/></div></div><div class="box"><div class="pic"><img src="img/16.jpg"/></div></div><div class="box"><div class="pic"><img src="img/17.jpg"/></div></div><div class="box"><div class="pic"><img src="img/18.jpg"/></div></div><div class="box"><div class="pic"><img src="img/19.jpg"/></div></div><div class="box"><div class="pic"><img src="img/20.jpg"/></div></div><div class="box"><div class="pic"><img src="img/21.jpg"/></div></div><div class="box"><div class="pic"><img src="img/22.jpg"/></div></div><div class="box"><div class="pic"><img src="img/23.jpg"/></div></div><div class="box"><div class="pic"><img src="img/24.jpg"/></div></div><div class="box"><div class="pic"><img src="img/25.jpg"/></div></div><div class="box"><div class="pic"><img src="img/26.jpg"/></div></div><div class="box"><div class="pic"><img src="img/27.jpg"/></div></div><div class="box"><div class="pic"><img src="img/28.jpg"/></div></div><div class="box"><div class="pic"><img src="img/29.jpg"/></div></div><div class="box"><div class="pic"><img src="img/30.jpg"/></div></div><div class="box"><div class="pic"><img src="img/31.jpg"/></div></div><div class="box"><div class="pic"><img src="img/32.jpg"/></div></div><div class="box"><div class="pic"><img src="img/33.jpg"/></div></div><div class="box"><div class="pic"><img src="img/34.jpg"/></div></div><div class="box"><div class="pic"><img src="img/35.jpg"/></div></div><div class="box"><div class="pic"><img src="img/36.jpg"/></div></div><div class="box"><div class="pic"><img src="img/37.jpg"/></div></div><div class="box"><div class="pic"><img src="img/38.jpg"/></div></div><div class="box"><div class="pic"><img src="img/39.jpg"/></div></div><div class="box"><div class="pic"><img src="img/40.jpg"/></div></div><div class="box"><div class="pic"><img src="img/41.jpg"/></div></div><div class="box"><div class="pic"><img src="img/42.jpg"/></div></div><div class="box"><div class="pic"><img src="img/43.jpg"/></div></div><div class="box"><div class="pic"><img src="img/44.jpg"/></div></div><div class="box"><div class="pic"><img src="img/45.jpg"/></div></div><div class="box"><div class="pic"><img src="img/46.jpg"/></div></div><div class="box"><div class="pic"><img src="img/47.jpg"/></div></div></div></body></html>

<pre name="code" class="javascript">window.onload = function(){waterfall('main','box');var dataInt = {"data":[{"src":"48.jpg"},{"src":"49.jpg"},{"src":"50.jpg"},{"src":"51.jpg"},{"src":"52.jpg"},{"src":"53.jpg"},{"src":"54.jpg"}]}window.onscroll = function(){var oParent = document.getElementById('main');if(checkscrollside){//将数据块渲染到页面中尾部for(var i = 0;i<dataInt.data.length;i++){var oBox = document.createElement('div');oBox.className = 'box';oParent.appendChild(oBox);var oPic = document.createElement('div');oPic.className = 'pic';oBox.appendChild(oPic);var oImg = document.createElement('img');oImg.src = 'img/'+ dataInt.data[i].src;oPic.appendChild(oImg);}waterfall('main','box');}}}function waterfall(parent,box){//取box元素var oParent = document.getElementById(parent);//console.log(oParent);var oBoxs = getByClass(oParent,box);//计算页面的列数（页面宽/box宽）var oBoxsW = oBoxs[0].offsetWidth;console.log(oBoxsW);var cols = Math.floor(document.documentElement.clientWidth/oBoxsW);console.log(cols);//设置main的宽度//oParent.style.cssText = 'width:'+ oBoxsW*cols +'px; margin:0 auto';var hArr = [];for(var i = 0;i < oBoxs.length;i++){if(i<cols){hArr.push(oBoxs[i].offsetHeight);}else{var minH = Math.min.apply(null,hArr);console.log(minH);var index= hArr.indexOf(minH);console.log(index);oBoxs[i].style.position = 'absolute';oBoxs[i].style.top = minH +'px';oBoxs[i].style.left = index*oBoxsW + 'px';hArr[index] +=oBoxs[i].offsetHeight;}}console.log(hArr);}//根据class获取元素function getByClass(parent,className){var boxArr = []; //用来存储class的元素boxArr= parent.getElementsByClassName(className);//console.log(boxArr);return boxArr;}//检测是否具备了滚动加载数据块的条件function checkscrollside(){var oParent = document.getElementById('main');var oBoxs = getByClass(oParent,'box');var lastBoxH = oBoxs[oBoxs.length-1].offsetTop + Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2) ;var scrollTop =document.body.scrollTop || document.documentElement.scrollTop;var height = document.body.clientHeight || document.documentElement.clientHeight;if(lastBoxH< (scrollTop + height)){return true;}else{return false;}}

*{margin: 0;padding: 0;}#main{position: relative;}.box{padding: 15px 0 0 15px; float: left;}.pic{padding: 10px; border: 1px solid #CCCCCC;border-radius: 5px; box-shadow: 0 0 5px #ccc;}.pic img{width: 165px; height: auto;}

0 0