chokcoco/iCSS

纯 CSS 实现瀑布流布局

chokcoco opened this issue · 1 comments

chokcoco commented

CSS实现瀑布流布局（display: flex）

  • 本例使用 CSS flex 实现瀑布流布局
  • 关键点，横向flex布局嵌套多列纵向flex布局，使用了 vw 进行自适应缩放

https://codepen.io/Chokcoco/pen/wYgYXX

CSS实现瀑布流布局（column-count）

  • 本例使用 CSS column 实现瀑布流布局
  • 关键点，column-count -- 元素内容将被划分的最佳列数
  • 关键点，break-inside -- 避免在元素内部插入分页符

https://codepen.io/Chokcoco/pen/LgjazE?editors=1100

CSS实现瀑布流布局（display: grid）

+本例使用 CSS grid 实现瀑布流布局

  • 使用 grid-template-columns、grid-template-rows 分割行列
  • 使用 grid-row 控制每个 item 的所占格子的大小

https://codepen.io/Chokcoco/pen/KGXqyo

chokcoco commented

当然，有点 伪 瀑布流的感觉~