瀑布流布局
2016-07-20 本文已影响19人
羞涩的涩
瀑布流布局的原理：
在定宽不定高的一系列块元素下，利用绝对定位布局。
- 分别为父元素和子元素设置相对定位和绝对定位
- 计算出子元素所占的列数并加入到新创建的一个数组
- 然后遍历数组获取数组的最小值
- 遍历每个子元素设置top和left，top为数组的最小值，left为数组索引数与子元素宽度相乘
- 将获取的高度相加
在线demo
需要注意的是如果要给父元素添加边框需要用到计算，因为子元素绝对定位无法撑起父元素的高度。
- 本博客版权归羞涩的涩和饥人谷所有，转载请注明出处
