JavaScript实现瀑布流布局的3种方式

今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方式。效果如下二、column 多行布局实现瀑布流column 实现瀑布流主要依赖两个属性。然后通过设置 flex-flow:column wrap 使其换行。设置 height: 100vh 填充屏幕的高度，来容纳子元素。每一列的宽度可用 calc 函数来设置，即 width: calc。分成等宽的 3 列减掉左右两遍的 margin 距离。如果需要动态添加数据，或者动态设置列数，就需要使用到 JS + jQuery。