瀑布流布局

瀑布流布局的原理

把高度不同,宽度相同的一些块元素,按照一定方法排列,使得每行是固定的元素个数,后面的元素总是排在前面的每列元素中高度最小的那一列元素的下面。
有一种实现方法是利用相对定位和绝对定位。
1.把这些元素的父元素设置为相对定位。
2.设置这些元素有同样的宽度,而且元素都设置成绝对定位。
3.先计算出每一行可以排几个元素,再创建一个长度是几的数组。数组中的初始值都为0。
4.数组中数字相互比较大小,利用绝对定位,按次序把元素排在最小的数字所在的元素列的下面,并把这个数字加上这个元素的高度的和的值存储在数组的对应位置处。
5.重复步骤4,直到所有元素都排列好。
本文版权归作者和饥人谷所有,转载请注明出处

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • html结构 (Emmet)(div.box>div.pic>img[src="images/$.jpg"])*2...
    黎贝卡beka阅读 539评论 1 4
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 瀑布流典型网站 花瓣网、堆糖 [目录] 瀑布流布局原理大体思路具体思路 插件封装(5步) 动态渲染需求分析渲染第一...
    顽皮的雪狐七七阅读 4,004评论 0 6
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征: 浮动元素的框可以向左或者向...
    Wensx阅读 408评论 0 0
  • 恢复棕瓶也有一个周了,皮肤虽然依旧很莹润,但是气色不是特别好了,估计是湿气太重了,最近起床非常困难,而且腿沉,,膝...
    少女梓涵阅读 213评论 0 0