瀑布流式布局 (Waterfall Layout) 的两种常用实现方式

阅读 2050
收藏 65
2017-01-21
原文链接:github.com

瀑布流式布局 (Waterfall Layout)

介绍

什么是瀑布流布局?直接到 Pinterest 的网站上体验一下就知道了。

说明

正好由于工作需要,花了点时间总结了两种方式的瀑布流布局:一种基于 inline-boxflex,对浏览器兼容有一定要求;另一种方式与 Pinterest 采用的方式相同,即 absolute 方式。

  • 基于 inline-box + flew
  • 基于 absolute

这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。

实现

这里实现的流式布局假设首屏内容是通过 Ajax 获取的。如需将首屏内容直接渲染输出,需要对渲染部分的逻辑稍作修改。

评论