瀑布流布局的实现原理

瀑布流布局的原理介绍

废话不多说,先上图


瀑布流页面排版
  • 可以看出按列排列,内容的宽度固定、高度大小不一。
  • 首先怎么才能实习这种错落有致的排列呢? 浮动?NO! 用绝对定位才能更好地满足我们的要求。
  • 怎么定位的问题解决了,但是怎么才能让其有序的填充到指定的位置呢?
  1. 将列看成关于每一列高度的数组,那么列的数目怎么确定-利用容器的宽度/每个区块的宽度就得到length(区块的高度一定要等load之后再获取高度)
  2. 第一列按顺序排放,此时列的高度变了,数组的内容也变了
  3. 第二列怎么摆放呢? 按照我们的惯性思维,第一个获得数据应该放到高度最低的列上,这样页面才能看着舒服。那么,我们先遍历数组找到列高的最小值,将其放到该位置,此时该列的高度发生变,然后下一个数据在进行判断,找到列高最小值。以此类推,下面的数据都这么放置就实现了瀑布流。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • github地址little-waterfall-framework-** 这里把整一个瀑布流小框架的实现思路写出...
    Tuberose阅读 6,485评论 12 123
  • html结构 (Emmet)(div.box>div.pic>img[src="images/$.jpg"])*2...
    黎贝卡beka阅读 529评论 1 4
  • 1. 天色将晚的时候,我扛上锄头往家走。 暮色越过重重高山,整个世界将要被披上一层黑色的外衣。 老一辈常说,这个时...
    洛子帅阅读 1,308评论 42 43
  • 做了一个梦 赔你一个迟到的春天 许了一个诺 带你去看油菜花开满的梯田 城里的农村娃 咀嚼着心里的悸动和不安 憧憬牵...
    孤独乞丐阅读 583评论 6 5
  • 今天休息时,我玩儿了一场球赛。我用的是巴西队,敌人是奥地利队。比赛开始了,一会儿,我们进球啦! ...
    皓皓_f9d7阅读 115评论 0 0