关于瀑布流布局

原理

  1. 瀑布流布局原理是什么？
  1. 计算出浏览器可以放置元素的个数：浏览器宽度/元素宽度。如果元素之间有间隙(margin)，则要使用outerWidth(true);。要放置的元素需要使用绝对定位position: absolute;。
  2. 定义一个用于存放元素高度和的数组，每次找到数组中的最小高度，然后把新的元素放在这个最小高度对应的元素下方。然后根据元素下标计算出top和left值。然后使用jQuery的css()来放置元素。
  3. 遍历元素，放置元素。

demo

task-30

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

推荐阅读更多精彩内容

  • jquery瀑布流的原理
    什么是瀑布流，说话不形象，直接看图说话 ![S55M%73LKAKO@]OZ7D@MH.png](http://u...
    GarenWang阅读 952评论 0赞 4
  • 面试题
    前端开发面试题 面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。 题目类型： 理论知...
    怡宝丶阅读 2,606评论 0赞 7
  • 瀑布流布局
    一、瀑布流的布局原理是什么？ 1.计算出浏览器可以横向排列元素的个数（元素的宽度都是相同的）：浏览器的宽度/元素的...
    咩咩咩1024阅读 319评论 0赞 0
  • 瀑布流效果
    html结构 （Emmet） (div.box>div.pic>img[src="images/$.jpg"])*...
    LaBaby_阅读 657评论 0赞 0
  • Interview-Questions(web)
    前端开发知识点 HTML&CSS对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型...
    Hebborn_hb阅读 851评论 0赞 1