Successfully reported this slideshow.

瀑布流

1,460 views

Published on

砖头布局

  • Be the first to comment

瀑布流

  1. 1. 瀑布流
  2. 2. 目录• 瀑布流的布局• 瀑布流的执行流程• 瀑布流的优化
  3. 3. 瀑布流布局
  4. 4. 瀑布流布局 砖头的模板 瀑布流的主体 Loading或pager
  5. 5. 瀑布流布局 砖头的模板栏栅 栏栅 栏栅 栏栅 Loading或pager
  6. 6. 瀑布流布局 砖头的模板砖头 砖头 砖头 砖头砖头 砖头 砖头 砖头 栏栅 砖头砖头 砖头 砖头 砖头 Loading或pager
  7. 7. 流布流执行流程 创建空瀑布流 通过ajax得到一组砖头的JSON数据通过模块得到一组砖头的HTML代码 循环 自身求出最短的栏栅,插入砖头(循环自身)
  8. 8. 瀑布流执行流程create_waterfall.js• 对不同页面的瀑布流进行差异化,• 对不同的浏览器进行差异化,• 绑定两种scroll回调,砖头数据的请求与砖 头的淡出动画• 是显示loading还是显示pager• 是加载到多少个砖头不再请求,还是不断 请求
  9. 9. 瀑布流执行流程ejs.js模块系统,用于拼接字符串,应对需求不断 变化
  10. 10. 瀑布流的优化全系列• 必须先得到图片的高才插入下一块砖头, 减少overflow• 同步,走后端• 异步,预加载,img.complete
  11. 11. 瀑布流的优化IE678• 严禁使用滤镜(PNG滤镜,透明滤镜)• 砖头不做淡出动画,直接显示
  12. 12. 瀑布流的优化Mac下的safari(5.1.5)• 问题:很容易达到性能瓶颈• 解决:禁止动画,降低scroll回调被执行的 机率

×