前端 js 瀑布流

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。

好吧,我承认上面是我百度的,为了不误导小伙伴们,我还是坚持用权威的。


效果图

      如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟呢?

      当滚动条往下拉,触碰到底部某个节点时,后续的小部分图片内容会逐步加载跟进,以此类推下去,直到内容全部加载完,这样的布局可以提升用户体验,尤其面对移动端的用户,更加省流量。

      现在很多网站都运用了这种格局,类似的有蘑菇街,淘宝啊等等,最经典的要数百度的图片搜索了,由于内容多,感觉永远加载不完,看不完;

     当然,实现的方法有很多种,不同语言有不同思路逻辑,这里只讲js的


基本样式


js

思路:当BoundingClientRect().bottom 小于或者等于文档的clientHeight时,触发事件,让后面的图片逐步加载排列在对应最小高度的图片上。






最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,863评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,539评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,294评论 4 61
  • 我突然意识到,也许我就是怀念写日记的感觉了。 以前小学起到初中,每天被要求写一篇日记。养成了习惯,觉得很痛苦,但是...
    觞咏而归阅读 171评论 1 0
  • 不能要求别人做什么,我们只能掌握自己做什么。我们都希望自己是特殊的,不是么? 秋天深了,你好,11月 今天画个皮卡丘!
    MAX龙叔阅读 103评论 0 4