茶歇驿站 成长之路由我相伴。

仿pinterest瀑布流KISSY的Waterfall浏览器兼容问题

2013-09-10

瀑布流概述

瀑布流案例

  1. pinterest-瀑布流的开山鼻祖
  2. Tumblr
  3. 花瓣网-国内做的很不错的瀑布流
  4. 其他各行各业都有所涉及

瀑布流组件

官方网站简单介绍了怎么样一步一步的入门,并且还给我们配备了在线demo。但是它有个很大的缺陷,就是在网络状况不好的时候,它的布局非常糟糕。

  • KISSY是由阿里集团前端工程师们发起创建的一个开源 JS 框架。它具备模块化、高扩展性、组件齐全,接口一致、自主开发、适合多种应用场景等特性。在KISSY内部有提供一个瀑布流组件Waterfall,并且也为我们配备了demo和它的完整教程

    有关它的使用,我在这里不做详细描述,请参照demo和教程去试验。

  • 其他,比方说花瓣网的瀑布流实现就非常牛逼,不仅完成了瀑布流的工作,而且还处理页面上的数据存储,避免因为大数据量时造成页面的卡顿情况的发生。

瀑布流KISSYUI兼容问题

接下来着重说一下,我在使用KISSY的waterfall时,所遇到的浏览器兼容问题或者说注意事项。

如果我们将KISSY上面的demo2.html保存为本地,使用Chrome,FF,IE8,360,都正常可用。

当我把里面的代码逻辑移植到我们自己的项目中时,因为涉及到本地项目的需求,所以我做了部分修改,将请求数据的IO模块的data参数中的format,method,api_key 都注释。 拼接每一页数据的高度也实时从返回数据中获取。script的显示模板也做了部分调整。

然后就是进行本地测试,用Chrome,FF,IE8,都正常显示,但是使用360就是不加载数据。通过各种调试也没发现任何问题,只是知道IO请求没有被调用。

最开始我还以为这个是KISSY的waterfall的浏览器兼容问题,并且还将此问题反馈到了社区中。waterfall360浏览器不能加载

但是经过作者的一个提示,我又进行了一次详细测试,并且分多种情况进行测试。

后面终于发现是由于data中的参数format:”json”没有加上所导致,至于为什么没有此参数就无法加载,可能还需要进一步的查看KISSY-waterfall组件以及360浏览器版本差异来查找原因。

希望以上的说明对大家简单了解瀑布流以及KISSY-waterfall的浏览器兼容问题有一个简单认识。

如果以上描述有任何错误或者不足,还请大家给以指正。


Comments

Content