浅谈瀑布流

瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局,最早采用此布局的是网站是 Pinterest,后逐渐在国内流行。

瀑布流布局效果

浅谈瀑布流_第1张图片

即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。

那么规则是什么呢?
下面通过图解来分析一下瀑布流的算法。

图解瀑布流算法

当第一排排满足够多的等宽图片时(如下图情况),自然而然的考虑到之后放置的图片会往下面排放。

浅谈瀑布流_第2张图片

那么第六张图片,放置在什么位置呢?是下图的位置么?

浅谈瀑布流_第3张图片

我们通过瀑布流算法实验得到,后面紧跟的第六张图片的位置应该是这个位置。

浅谈瀑布流_第4张图片

为什么呢?
因为放置它之前,这一列的高度为所有列中最小,所以会放置在这个地方。
所以我们知道了,如果再继续放置下去,第七张图片应该是这个位置,对吗?

浅谈瀑布流_第5张图片

通过瀑布流算法实验得出位置正确。看懂这个图示应该就能理解了瀑布流的原理算法。

浅谈瀑布流_第6张图片


JS 实现代码

这里使用了jQuery




Demo 演示

瀑布流 Demo 效果


总结瀑布流布局原理

  • 设置图片宽度一致
  • 根据浏览器宽度以及每列宽度计算出列表个数,列表默认0
  • 当图片加载完成,所有图片依次放置在最小的列数下面
  • 父容器高度取列表数组的最大值


实战相关

瀑布流 + 懒加载 实现新闻站
https://github.com/evenyao/waterfall-sinanews

你可能感兴趣的:(浅谈瀑布流)