本文主要是介绍破布流 - -，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
css
<style type="text/css">div{width:200px;position:absolute;background:#ccc;}
</style>
记得要把body 给个ID名取出来
js部分
<script type="text/javascript">
createDiv()function createDiv(){for(var i=0; i<20;i++){var aDiv=document.createElement("div");var divH=Math.floor(Math.random()*300+50);aDiv.style.height=divH+"px";body.appendChild(aDiv);}change()}function change(){//获取窗口宽度var windowW = document.documentElement.clientWidth;//计算一行能放多少盒子 取整 用窗口整个宽度除以盒子的宽度+边距var n = Math.floor(windowW/210);//获得盒子公用的左右边距var center = (windowW - n*210)/2;//把div获取过去var div = document.getElementsByTagName("div");//声明一个空数组来 为了保存每次累加盒子的高度var arrh = [];for(var i=0; i<div.length;i++){//因为n是不固定的 所以不能是数值 拿到 为了保存第一排的高度var j=i%n;//计算第二行的top值和left值if(arrh.length==n){//最低的盒子下标var min=minIndex(arrh);//给最低的盒子重新定一个新盒子的top值div[i].style.top = arrh[min]+10+"px";//相同 定一个left 根据循环找出最低下标的元素 *210是为得出当最低盒子的left值div[i].style.left = center+210*min+"px";//因为top值不可能是固定的所以 要+= 因为当前最低的地方加了新盒子所以 top值再变 要记录下来所以要+= 为了求出最低盒子加新盒子的总高度；arrh[min]+=div[i].offsetHeight+10;//要加上10px的边距}else{//保存第一排的高度arrh[j]=div[i].offsetHeight;//赋予给第一排的top值div[j].style.top=0;//赋予第一排的left值 *J是因为n是个定值div[j].style.left=center+j*210+"px";}}}window.onscroll=function(){//获取可见高度var widowH=document.documentElement.clientHeight;//滚动条var scrollH=document.documentElement.scrollTop||document.body.scrollTop;//获得元素内容的总高度var documentH=document.documentElement.scrollHeight||document.body.scrollHeight;if(widowH+scrollH>documentH-20){createDiv()}}//自适应window.onresize=function(){change()}//算出 数组中最矮元素的下标function minIndex(arr){var m=0;for(var i=0;i<arr.length;i++){m=Math.min(arr[m],arr[i])==arr[m]?m:i};return m }
</script>
这篇关于破布流 - -的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
