32.jquery 实战-无限加载+jsonp+瀑布流

代码

准备工作
在图片容器底部底部放一个元素#load,visiablity:hidden,让用户不可见。
在图片容器放置一个空元素(display:none),用于瀑布流计算宽度用。
jsonp 接口参数: http://platform.sina.com.cn/slide/album_tech?jsoncallback=func&app_key=1271687855&num=3&page=4

流程
当窗口滚动的时候,如果 load 出现在视野,那么执行加载数据并渲染。
加载数据并渲染:使用 ajax 的 jsonp 获取一组数据,执行 渲染并放置。
渲染并放置: 把数据填充成模板,append 到图片容器里。 当这些元素里的图片都加载完全时,执行瀑布流放置。
瀑布流放置: 把新增的这几个元素按照瀑布流的方式放置到合适位置。

预览
demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • 人生就像一列开往坟墓的列车,路途上会有很多站,很难有人至始至终陪你走完全程,当陪你的人要下车时,即便不舍,也要心存...
    sunny519111阅读 4,536评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,355评论 25 709
  • 《资治通鉴》汉纪三 汉高帝五年(己亥 公元前202年) 帝置酒洛阳南宫,上曰:“彻侯、诸将毋敢隐朕,皆言其情:吾所...
    bill_8200阅读 1,855评论 0 0
  • 本文篇幅较长,涵盖受害者本人论述的事件内容。其余均为个人理解,不喜勿喷。感谢您的到来。 一提到丽江,大家想到的必是...
    世俗凡人阅读 2,905评论 4 6

友情链接更多精彩内容