Your SlideShare is downloading. ×
0
瀑布流
瀑布流
瀑布流
瀑布流
瀑布流
瀑布流
瀑布流
瀑布流
瀑布流
瀑布流
瀑布流
瀑布流
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

瀑布流

1,233

Published on

砖头布局

砖头布局

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,233
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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回调被执行的 机率

×