今天小编跟大家讲解下有关瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局 的相关资料，希望小伙伴们看了有所帮助。
传统多列浮动 各列固定宽度 并且左浮动； 一列中的数据块为一组 列中的每个数据块依次排列即可； 更多数据加载时 需要分别插入到不同的列上； 优点: （1）布局简单 应该说没啥特别的难点； （2）不用明确知道数据块高度 当数据块中有图片时 就不需要指定图片高度。 缺点: （1）列数固定 扩展不易 当浏览器窗口大小变化时 只能固定的x列 如果要添加一列 很难调整数据块的排列； （2）滚动加载更多数据时 还要指定插入到第几列中 还是不方便。 代码范例： 复制代码代码如下: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>瀑布流布局</title> <style> *{ margin:0px; padding:0px;} li{ list-style:none} #div1{ width:760px; height:auto; margin:20px auto;} ul{ width:240px; margin:5px; float:left;} </style> </head> <body> <div id="div1"> <ul> <li> <img src="https://www.aidi.net.cn//css/img/1.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/2.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/3.jpg"/> </li> </ul> <ul> <li> <img src="https://www.aidi.net.cn//css/img/4.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/5.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/6.jpg"/> </li> </ul> <ul> <li> <img src="https://www.aidi.net.cn//css/img/7.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/8.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/9.jpg"/> </li> </ul> </div> </body> </html> 绝对定位 可谓是最优的一种方案。 优点： 方便添加数据内容 窗口变化 列数/数据块都会自动调整； 缺点: （1）需要实现知道数据块高度 如果其中包含图片 需要知道图片高度； （2）JS 动态计算数据块位置 当窗口缩放频繁 可能会狂耗性能。 代码范例： 复制代码代码如下: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>定位的瀑布流</title> <style> *{ margin:0px; padding:0px;} li{ list-style:none} #div1{ width:760px; height:auto; margin:20px auto; position:relative;} li{ position:absolute;} </style> <script language="javascript"> window.onload=function(){ var ali = document.getElementsByTagName('li'); var aHeight={L:[],C:[],R:[]}; for(var i = 0;i<ali.length;i++){ var iNow=i%3; switch(iNow){ case 0: ali[i].style.left='5px'; aHeight.L.push(ali[i].offsetHeight); var step=Math.floor(i/3); if(!step){ ali[i].style.top=0; }else{ var sum=0; for(var j=0;j<step;j++){ sum+=aHeight.L[j]+5; } ali[i].style.top=sum+'px'; } break; case 1: ali[i].style.left='250px'; aHeight.C.push(ali[i].offsetHeight); var step=Math.floor(i/3); if(!step){ ali[i].style.top=0; }else{ var sum=0; for(var j=0;j<step;j++){ sum+=aHeight.C[j]+5; } ali[i].style.top=sum+'px'; } break; case 2: ali[i].style.left='495px'; aHeight.R.push(ali[i].offsetHeight); var step=Math.floor(i/3); if(!step){ ali[i].style.top=0; }else{ var sum=0; for(var j=0;j<step;j++){ sum+=aHeight.R[j]+5; } ali[i].style.top=sum+'px'; } break; } } } </script> </head> <body> <div id="div1"> <ul> <li> <img src="https://www.aidi.net.cn//css/img/1.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/2.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/3.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/4.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/5.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/6.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/7.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/8.jpg"/> </li> <li> <img src="https://www.aidi.net.cn//css/img/9.jpg"/> </li> </ul> </div> </body> </html>来源：爱蒂网
