Skip to content

瀑布流

前端实现瀑布流一般有以下方式:

  1. 使用display: grid网格布局,计算子项grid-row: auto / span num里的num 示例
  2. 使用position: absolute相对定位,计算子项的top;
  3. 当然还有column-count方式和display:flex;flex-flow:column wrap方式;
    1. column-count方式,先从上到下排列,再从左到右排列的,不符合阅读习惯不做考虑;
    2. display:flex;flex-flow:column wrap方式需要固定高度,仅试用于数据确认的情况;