瀑布流

瀑布流布局的原理是什么？

针对等宽不等高的元素进行瀑布流布局，其中每个子元素都是针对父容器进行绝对定位 (由 js 计算出每个子元素的 top 和 left)

步骤

  1. 计算当前的浏览器窗口，能够放下多少列元素，获得列数
  2. 创建一个长度为列数的数组，数组的内容用于记录每一个内容列的当前高度，这个高度初始设为0
  3. left : nodeWidth * idx，top : minColumnHeight
  4. 放入元素后，更新所在内容列的高度，再写入数组中

代码

task30

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

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,870评论 1赞 92
  • 瀑布流小框架
    github地址little-waterfall-framework-** 这里把整一个瀑布流小框架的实现思路写出...
    Tuberose阅读 6,533评论 12赞 123
  • 瀑布流效果
    html结构 （Emmet） (div.box>div.pic>img[src="images/$.jpg"])*...
    LaBaby_阅读 679评论 0赞 0
  • 桃宝的第一个世界地球日
    2017年的4月22日是桃宝出生后迎来的第一个世界地球日。 阳光无比晃眼，春风无比猛烈，温度无比…难受，因为有句老...
    花開阅读 330评论 0赞 0
  • 心动是被温暖的一瞬间
    01 “你说我是不是真的不会谈恋爱啊？” “只是你还没有遇到那个让你心动的人吧。” “可是为什么我从来都没有感觉真...
    阑以卿阅读 269评论 0赞 1