瀑布流布局：不了代码代码

  瀑布流布局是一种比较流行的页面布局方式，表现为参差不齐的多栏卡片。跟网格布局相比，显得更灵动，更具艺术气息。

  实现瀑布流布局的方式有多种，比如multi-column布局，grid布局，flex 布局等。但是这些实现方式都有各自的局限性，代码也略复杂。

  其实，有个最原始、最简单，也是兼容性最好的实现方式，那就是使用绝对定位。瀑布流布局的元素是一些等宽不等高的卡片纯css实现瀑布流布局，只要根据元素的实际宽高计算出自己的坐标位置就行了。

  要计算坐标自然要用到 JavaScript纯css实现瀑布流布局，这就不是纯 CSS 方案，对某些前端极客来讲显得不那么纯粹。不过只要理清思路了，也用不了几行代码。本文就给出最近实现的一个版本。

// 计算每个卡片的坐标 export function calcPositions({ columns = 2, gap = 7, elements }) {   if (!elements || !elements.length) {     return [];   }   const y = []; //上一行卡片的底部纵坐标数组，用于找到新卡片填充位置   const positions = []; // 每个卡片的坐标数组   elements.forEach((item, index) => {     if (y.length  {         item.style.cssText = left:${positions[index].left}px;top:${positions[index].top}px;;       });       this.$el.style.height = ${containerHeight}px;     },   }, }; .masonry-lite{   position: relative; } .masonry-item {   position: absolute; } 

  使用组件：

  
    
    {{ item.title }}
  

  不过这样其实还会有点问题，就是doLayout的执行时机。因为该方案基于绝对定位，需要元素在渲染完成后才能获取到实际宽高。如果卡片内有延迟加载的图片或者其他动态内容，高度会发生变化。这种情况下就需要在DOM更新后主动调用一次doLayout重新计算布局。

  如果大家有更好的实现方案，欢迎交流！

  代码仓库：

  npm 包：masonry-lite

  如果觉得对你有帮助，帮忙点个不要钱的star。

往期干货：
 26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载（免费）## 干货~2021最新前端学习视频速度领取
## 前端书籍-前端290本高清pdf电子书打包下载  
  

  点赞和在看就是最大的支持❤️