如何实现瀑布流布局的三种高效方法？

本文共计1634个文字，预计阅读时间需要7分钟。

前言：今天闲逛时观察到，每一行的程度并非相同，经过了解才知，原来这是一种螺旋流布局，感觉颇有意境，决定研究一下。在网上也找到了一些案例，实现螺旋流大致有3种方法。

前言

今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方式。

一、JS 实现瀑布流

思路分析

• 瀑布流布局的特点是等宽不等高。
• 为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。
• 父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。