瀑布流

@Masonry

概述 Overview

.本意是交错排列的砖石结构，强大的前端开发者形象的称之为瀑布流

.特点：宽度相同，高度不同

.早期多使用 js + float 实现；现在可以使用 flex、column 快速实现

.为调试方便，可以先使用占位图片 Lorem Picsum 开发

<img src="https://picsum.photos/200/300?random=1">

分栏 Columns

实现：无需指定高度，只需指定列数即可；指定 gap 为0可以紧凑排列

不足：不太方便编号

弹性盒子 flex

列方向、换行、固定列宽

高度做不到任性，需调试找到最佳高度 - 刚好放满指定的列，且不能出现水平滚动条；如果使用 gap 还需要精确计算每列宽度

网格 grid

划分行 grid-template-rows、列 grid-template-columns

指定流方向为列 grid-auto-flow

根据效果调整高度