瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。
好吧,我承认上面是我百度的,为了不误导小伙伴们,我还是坚持用权威的。
如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟呢?
当滚动条往下拉,触碰到底部某个节点时,后续的小部分图片内容会逐步加载跟进,以此类推下去,直到内容全部加载完,这样的布局可以提升用户体验,尤其面对移动端的用户,更加省流量。
现在很多网站都运用了这种格局,类似的有蘑菇街,淘宝啊等等,最经典的要数百度的图片搜索了,由于内容多,感觉永远加载不完,看不完;
当然,实现的方法有很多种,不同语言有不同思路逻辑,这里只讲js的
思路:当BoundingClientRect().bottom 小于或者等于文档的clientHeight时,触发事件,让后面的图片逐步加载排列在对应最小高度的图片上。