瀑布流布局的原理：
在定宽不定高的一系列块元素下，利用绝对定位布局。
- 分别为父元素和子元素设置相对定位和绝对定位
- 计算出子元素所占的列数并加入到新创建的一个数组
- 然后遍历数组获取数组的最小值
- 遍历每个子元素设置top和left，top为数组的最小值，left为数组索引数与子元素宽度相乘
- 将获取的高度相加
在线demo
需要注意的是如果要给父元素添加边框需要用到计算，因为子元素绝对定位无法撑起父元素的高度。
- 本博客版权归羞涩的涩和饥人谷所有，转载请注明出处
瀑布流布局
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
相关阅读更多精彩内容
- html结构 （Emmet）(div.box>div.pic>img[src="images/$.jpg"])*2...
- 瀑布流典型网站 花瓣网、堆糖 [目录] 瀑布流布局原理大体思路具体思路 插件封装（5步） 动态渲染需求分析渲染第一...
