一、基本思路

1、先看最终的效果图：

2、实现原理：通过position：absolute（绝对定位）来定位每一个元素的位置，并且将当前列的高度记录下来方便下一个dom位置的计算

二、代码实现

1、版本一：根据思路实现基础版

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>css布局-瀑布流的实现</title>
  6. <style type="text/css">
  7. .box {
  8.   position: relative;
  9. 	width: 500px;
  10. 	min-height: 100px;
  11. 	margin: 100px auto;
  12. 	background: #eeeeee;
  13. }
  14. .item {
  15.   position: absolute;
  16.   width: 120px;
  17.   left: 0;
  18.   top: 0;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box">
  24.     <div class="item" style="height: 40px;background: red;"></div>
  25.     <div class="item" style="height: 50px;background: blue;"></div>
  26.     <div class="item" style="height: 100px;background: green;"></div>
  27.     <div class="item" style="height: 60px;background: gray;"></div>
  28.     <div class="item" style="height: 50px;background: orange;"></div>
  29.     <div class="item" style="height: 20px;background: yellow;"></div>
  30.     <div class="item" style="height: 40px;background: red;"></div>
  31.     <div class="item" style="height: 50px;background: blue;"></div>
  32.     <div class="item" style="height: 100px;background: green;"></div>
  33.     <div class="item" style="height: 120px;background: gray;"></div>
  34.     <div class="item" style="height: 58px;background: orange;"></div>
  35.     <div class="item" style="height: 36px;background: yellow;"></div>
  36. </div>
  37. <script type="text/javascript">
  38.   const BOX_WIDTH = document.querySelector('.box').offsetWidth //瀑布流外层盒子的宽度
  39.   const ITEM_WIDTH = document.querySelector('.item').offsetWidth //瀑布流内层盒子的宽度
  40.   const COLUMN = Math.floor(BOX_WIDTH/ITEM_WIDTH)   //根据宽度计算可渲染的列数
  41.   const MARGIN = (BOX_WIDTH - ITEM_WIDTH*COLUMN)/(COLUMN-1) // 根据宽度计算每一列的间距
  42.   const MARGINTOP = 10 //固定设置每一个小盒子上下间距是10
  43.   let height_arr = new Array(COLUMN).fill(0)  //定义一个长度等同与列数的数组用来存储每一列的高度，初始值均为0
  44.   let item = document.querySelectorAll('.item')
    //遍历每一个小盒子，确定小盒子的位置
  45.   for(let i = 0; i < item.length; i++) {
  46. 	let index = height_arr.indexOf(Math.min.apply(null, height_arr))
  47. 	item[i].style.left = (ITEM_WIDTH + MARGIN) * index + 'px'
  48. 	item[i].style.top = height_arr[index] + MARGINTOP + 'px'
  49. 	height_arr[index] += item[i].offsetHeight + MARGINTOP
  50.   }
    //将数组中最大的值，即最高的那一列的高度赋给外层盒子
  51.   document.querySelector('.box').style.height = Math.max.apply(null, height_arr) + 'px'
  52. </script>
  53. </body>
  54. </html>

2、版本二：对版本一进行封装，方便重复使用

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>css布局-瀑布流的实现</title>
  6. <style type="text/css">
  7. .box {
  8.   position: relative;
  9. 	width: 500px;
  10. 	min-height: 100px;
  11. 	margin: 100px auto;
  12. 	background: #eeeeee;
  13. }
  14. .item {
  15.   position: absolute;
  16.   width: 120px;
  17.   left: 0;
  18.   top: 0;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box" style="">
  24.     <div class="item" style="height: 40px;background: red;"></div>
  25.     <div class="item" style="height: 50px;background: blue;"></div>
  26.     <div class="item" style="height: 100px;background: green;"></div>
  27.     <div class="item" style="height: 60px;background: gray;"></div>
  28.     <div class="item" style="height: 50px;background: orange;"></div>
  29.     <div class="item" style="height: 20px;background: yellow;"></div>
  30. 　　 <div class="item" style="height: 40px;background: red;"></div>
  31. 　　 <div class="item" style="height: 50px;background: blue;"></div>
  32. 　　 <div class="item" style="height: 100px;background: green;"></div>
  33. 　　 <div class="item" style="height: 120px;background: gray;"></div>
  34. 　　 <div class="item" style="height: 58px;background: orange;"></div>
  35. 　　 <div class="item" style="height: 36px;background: yellow;"></div>
  36. </div>
  37. <script type="text/javascript">
  38. 	function WaterFall(params) {
  39. 		this.box = (params && params.parent) || '.box'
  40. 		this.item = (params && params.child) || '.item'
  41. 		this.column = (params && params.column) || 0
  42. 		this.row_margin = (params && params.row_margin) || 0
  43. 		this.column_margin = (params && params.column_margin) || 10
  44. 		this.height_arr = []
  45. 		this._box_width = 0
  46. 		this._item_width = 0
  47. 		this._computed = function() {
  48. 			this._box_width = document.querySelector(this.box).offsetWidth
  49. 			this._item_width = document.querySelector(this.item).offsetWidth
  50. 			this.column = Math.floor((this._box_width - this.row_margin)/this._item_width) //列数
  51. 			this.row_margin = !this.row_margin ? (this._box_width - this._item_width * this.column)/(this.column-1) : this.row_margin
  52. 		}
  53. 		this.init = function() {
  54. 			this._computed()
  55. 			let item = document.querySelectorAll(this.item)
  56. 			this.height_arr = new Array(this.column).fill(0)
  57. 			for(let i = 0; i < item.length; i++) {
  58. 				let index = this.height_arr.indexOf(Math.min.apply(null, this.height_arr))
  59. 				item[i].style.left = (this._item_width + this.row_margin) * index + 'px'
  60. 				item[i].style.top = this.height_arr[index] + this.column_margin + 'px'
  61. 				this.height_arr[index] += item[i].offsetHeight + this.column_margin
  62. 			}
  63. 			document.querySelector('.box').style.height = Math.max.apply(null, this.height_arr) + 'px'
  64. 		}
  65. 	}
  66. 	var test = new WaterFall()
  67. 	test.init()
  68. </script>
  69. </body>
  70. </html>

 

三、总结：瀑布流的实现并不复杂，只要清楚了原理剩下的就是耐心的计算间距以及小盒子的位置啦～

posted on 2019-06-18 18:31 天株 阅读(…) 评论(…) 编辑 收藏

版权声明：本文为zhiying原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zhiying/p/11046887.html