瀑布流

定义

在一些主流的一些软件当中我们常常可以看见这样的一种布局,内容区块（如图片或卡片）按列从上至下排列，当一个内容区块排满一列时，下一个内容区块会填补下一行最短的列，以此类推，形成一种类似瀑布般错落有致的效果,也就是瀑布流布局（Masonry Layout 或瀑布流式布局）下图的手机淘宝和小红书网站上都采用了这种布局，源码放在文章的最后面。

好处

瀑布流布局的好处主要包括以下几点：

空间利用率高：瀑布流布局能够根据内容的大小自动填充不同的列，有效地利用页面空间，避免了传统网格布局可能出现的大面积空白。
视觉吸引力强：瀑布流的不对称分布使得页面看起来富有变化和层次感，给用户带来新颖且有趣味性的视觉体验，有利于提升用户的关注度和参与度。
沉浸式浏览：用户只需要上下滚动屏幕即可连续不断地查看内容，流畅的滚动体验增强了用户沉浸式阅读或浏览的感觉，有助于延长用户在页面上的停留时间。
触屏设备友好：对于智能手机和平板电脑等触屏设备，瀑布流布局符合用户滑动浏览的习惯，减少了翻页操作，提高了移动端的浏览效率。
动态加载与个性化推荐：瀑布流布局便于实现"无限滚动"，即当用户滚动到底部时自动加载更多内容，同时可以根据用户行为数据进行个性化推荐，进一步提升用户体验。
内容多样性展示：对于包含不同尺寸或类型内容的页面，瀑布流布局能很好地适应这些差异，将各种内容有机地结合在一起展示。

实现

使用一个父容器container,图片容器img包裹要展示的图片;通过js获取父容器的DOM结构,之后再获取其子元素图片容器img然后将其按照瀑布流的规则使用绝对定位放置;使用一个heightArr高度数组,在放置的时候记录每一列图片的高度,图片应该放置在高度最低的那一列。

1. html,css部分

先将图片容器.img设置为固定宽度,并设置展示方式为行内块display:inline-block,并将其对齐方式设置为顶部对齐vertical-align:top,因为行内块默认是底部对齐;

图片设置宽度为父容器的100%

将图片容器放在父容器中

此时的页面

按照一行一行排列但是之间还是有空隙因为我们此时还没使用js来控制元素的位置,瀑布流主要就是通过js来控制图片的位置实现的

2.js部分

js的逻辑需要等待页面元素加载完成之后不然，也获取不到元素的DOM结构。咱们把js部分的主要逻辑写在window.onLoad()中。window.onload() 是 JavaScript 中的一个内置函数，它会在整个页面（包括所有资源如图片、脚本文件、样式表等）加载完毕后执行。换句话说，当浏览器完成解析 HTML 文档，并加载完页面内所有外部资源后，才会触发 window.onload 事件