.masonry-lite{position:relative;}.masonry-item{position:absolute;}瀑布式布局是一种比较流行的页面布局方式，表现为多栏不均匀的卡片。与网格布局相比，它看起来更加灵动和艺术。瀑布布局瀑布布局的实现方式有很多种，比如多列布局、网格布局、flex布局等，但是这些实现都有各自的局限性，代码略显复杂。其实还有一种最原始、最简单、兼容性最好的实现方式，就是使用绝对定位。瀑布流布局的元素是一些等宽不同高的卡片，只要根据元素的实际宽高计算坐标位置即可。要计算坐标，自然会使用JavaScript。这不是一个纯粹的CSS解决方案，对于一些前端极客来说也不是那么纯粹。但是只要头脑清醒，不需要几行代码。本文介绍了最近实现的版本。//计算每张卡片的坐标exportfunctioncalcPositions({columns=2,gap=7,elements}){if(!elements||!elements.length){return[];}consty=[];//最后一行cards新卡片的底坐标数组，用于寻找新卡片的填充位置constpositions=[];//每张卡片元素的坐标数组.forEach((item,index)=>{if(y.length
