css 多栏布局
一些复杂的布局案例
横向瀑布流
- float 浮动，不推荐
- grid 网格，不推荐
- position 定位，需要配合 JS 库（masonry.js , isotope.js），案例：https://tympanus.net/Development/GridLoadingEffects/index.html
- flex 弹性，推荐
源码预览打开窗口查看源码
竖向瀑布流
- float 浮动，不推荐
- grid 网格，不推荐
-
- flex 弹性，不推荐
- position 定位，需要配合 JS 库（masonry.js , isotope.js） - 可以做“加载更多”的需求
- 动态计算多列方式，需要配合 js 完成 - 可以做“加载更多”的需求
Mutil-Columns 多行布局
不适合“加载更多”的需求
- column-count 多栏的个数
- column-width 多栏的宽度
- column-gap 多栏的间距
- column-rule 多栏的边线
- column-span 多栏的合并
源码预览打开窗口查看源码
视觉差布局
- 也叫视差滚动布局，是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验
- 原理：修改 background-attachment, position, left, top, transform, opacity 等样式
- 需要配合 JS 插件来监听滚动条的位置 https://github.com/Prinzhorn/skrollr
源码预览打开窗口查看源码
一个复杂的案例
源码预览打开窗口查看源码