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

一个复杂的案例