瀑布流布局 · 前端

瀑布流布局的原则：等宽不等高确定一行要显示多少个列，然后就可以确定每列的相同的宽度 1、获取浏览器的宽度 2、获取单个列的而宽度 3 、第一行可以排列多少个宽度 4、将第二行的第一个插入到第一行最短的下面 ``` <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding:0; } .content{ width: 100%; height: 2000%; } .content>div{ float: left; border: 1px solid #ccc; padding:10px; } </style> </head> <body> <div class="content"> <div> <div style="width: 120px;height: 60px; background-color: red;">1</div> </div> <div> <div style="width: 120px;height:90px; background-color: red;">2</div> </div> <div> <div style="width: 120px;height: 60px; background-color: red;">3</div> </div> <div> <div style="width: 120px;height: 80px; background-color: red;">4</div> </div> <div> <div style="width: 120px;height: 20px; background-color: red;">5</div> </div> <div> <div style="width: 120px;height: 50px; background-color: red;">6</div> </div> <div> <div style="width: 120px;height: 30px; background-color: red;">7</div> </div> <div> <div style="width: 120px;height: 350px; background-color: red;">8</div> </div> <div> <div style="width: 120px;height: 20px; background-color: red;">9</div> </div> <div> <div style="width: 120px;height: 180px; background-color: red;">10</div> </div> <div> <div style="width: 120px;height: 60px; background-color: red;">11</div> </div> <div> <div style="width: 120px;height: 100px; background-color: red;">12</div> </div> <div> <div style="width: 120px;height: 20px; background-color: red;">13</div> </div> <div> <div style="width: 120px;height: 400px; background-color: red;">14</div> </div> <div> <div style="width: 120px;height: 250px; background-color: red;">15</div> </div> </div> <script type="text/javascript"> window.onload=function(){ //获取主容器的宽度 var content =document.getElementsByClassName('content')[0]; var contentWidth=content.offsetWidth; //获取单个列的宽度(所有列等宽) var columns=content.children; var columnWidth=columns[0].offsetWidth; //console.log(columnWidth);//142=120+(pqdding：10+10)+(border:1+1) //每行可以排列多少个列(著容器宽度/单个等宽列的宽度=取整) var nums=Math.floor(contentWidth/columnWidth); //将下面一排的列插入上面一排高度最低的列下面 // 我们要知道上一行所以列的高度，并取出最低的那一列 var arrHeight=[]; for (var i = 0; i < columns.length; i++) { if (i<nums) { //第一行的元素 arrHeight.push(columns[i].offsetHeight); }else{ //创建第一个和元素的高度和位置的对象 var obj={ minH:arrHeight[0], minI:0,//位置 } //第一个与一排的进行比对，如果一排中有一个小于现有的则替换到现有的 for (var j = 0; j < arrHeight.length; j++) { if (arrHeight[j]<obj.minH) { obj.minH=arrHeight[j]; obj.minI=j; } } columns[i].style.position="absolute"; columns[i].style.left=columns[obj.minI].offsetLeft+"px"; columns[i].style.top=obj.minH+"px"; //插入后这一列的高度就不是最低的啦,obj现有高度=最小高度+当前插入列的高度 arrHeight[obj.minI]=arrHeight[obj.minI]+columns[i].offsetHeight; } } } </script> </body> </html> ``` ``` <div class="content">  <div id="product" style="position: relative;"> <div class="img-container"> <div class="img-item"> <img src="__MOBILE__/img/蒙版组 14@3x.png" alt=""> </div> <div class="img-item"> <img src="__MOBILE__/img/蒙版组 15@3x.png" alt=""> </div> <div class="img-item"> <img src="__MOBILE__/img/蒙版组 16@3x.png" alt=""> </div> <div class="img-item"> <img src="__MOBILE__/img/蒙版组 17@3x.png" alt=""> </div> <div class="img-item"> <img src="__MOBILE__/img/蒙版组 18@3x.png" alt=""> </div> <div class="img-item"> <img src="__MOBILE__/img/蒙版组 15@3x.png" alt=""> </div> <div class="img-item"> <img src="__MOBILE__/img/蒙版组 16@3x.png" alt=""> </div> </div> </div> </div> <script type="text/javascript"> window.onload=function(){ //获取主容器的宽度 var content =document.getElementsByClassName('img-container')[0]; var contentWidth=content.offsetWidth;//375 //获取单个列的宽度(所有列等宽) var columns=content.children; var columnWidth=columns[0].offsetWidth; //console.log(columnWidth);//142=120+(pqdding：10+10)+(border:1+1) //每行可以排列多少个列(著容器宽度/单个等宽列的宽度=取整) var nums=Math.floor(contentWidth/columnWidth); //将下面一排的列插入上面一排高度最低的列下面 // 我们要知道上一行所以列的高度，并取出最低的那一列 var arrHeight=[]; for (var i = 0; i < columns.length; i++) { if (i<nums) { //第一行的元素 arrHeight.push(columns[i].offsetHeight); }else{ //创建第一个和元素的高度和位置的对象 var obj={ minH:arrHeight[0], minI:0,//位置 } //第一个与一排的进行比对，如果一排中有一个小于现有的则替换到现有的 for (var j = 0; j < arrHeight.length; j++) { if (arrHeight[j]<obj.minH) { obj.minH=arrHeight[j]; obj.minI=j; } } columns[i].style.position="absolute"; columns[i].style.left=columns[obj.minI].offsetLeft+"px"; columns[i].style.top=obj.minH+"px"; //插入后这一列的高度就不是最低的啦,obj现有高度=最小高度+当前插入列的高度 arrHeight[obj.minI]=arrHeight[obj.minI]+columns[i].offsetHeight; } } } </script> ```