瀑布流布局

课程内容

瀑布流原理

使用绝对定位,把每个元素放在列中最短的位置。

步骤

初始化时,对容器中已有数据块元素进行第一次计算:

  • 容器宽度;
  • 列宽度;
  • 最小列数; 最终列数取的是容器宽度/列宽度和最小列数的最大值,这样保证了,当窗口很小时,仍然出现最小列数的数据;

获得列数后,需要保存每个列的当前高度,这样在添加每个数据块时,才知道起始高度是多少; 依次取容器中的所有数据块,先寻找当前高度最小的某列,之后根据列序号,确定数据块的left,top值,left 为所在列的序号乘以列宽,top为所在列的当前高度,最后更新所在列的当前高度加上这个数据块元素的高度,至此,插入一个元素结束;

当所有元素插入完毕后,调整容器的高度为各列最大的高度值,结束依次调整;

性能效率上的注意点:

resize 触发会很频繁,可以将回调函数缓存一段时候后执行,即当这段时间内多次触发了resize事件,但回调函数只会执行一次

JS Bin