解决流式布局元素高度不统一导致布局不整齐问题

在页面布局中,在使用float布局大量相同属性元素的时候,如果元素的高度不固定,某个元素的高度过高,可能会阻挡元素的“流动”,会出现如图的情况。

float

这时我们只要保证后面的高度也大于或等于该元素高度,即可让后面的元素流动到前面

float-succ

所以一种常见的解决方案是

瀑布流

waterfull

瀑布流的实现方法,网上已经有大量教程,详情参阅

脚本之家—实现瀑布流

前端开发—瀑布流的实现方法

将同一列设置为统一高度

有时候,我们可能并不需要瀑布流的布局,因为在展示某些数据的时候,会显得比较混乱。

float3

要实现该效果,只需如下几步

  1. 获取所有元素
  2. 获取相同offsetTop值的元素,即同一行的元素
  3. 比较同一行元素的高度,取最大的height值,赋给每一个元素即可

如果遇到使用ng-repeat生成的元素无法获取自动高度问题,可以参考如下文章

解决无法获取ngRepeat生成元素样式的问题