瀑布流
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

瀑布流

on

  • 1,279 views

砖头布局

砖头布局

Statistics

Views

Total Views
1,279
Views on SlideShare
1,267
Embed Views
12

Actions

Likes
1
Downloads
2
Comments
0

1 Embed 12

http://www.cnblogs.com 12

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

瀑布流 Presentation Transcript

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