前端 js 瀑布流

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

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

效果图

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

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

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

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

基本样式

js

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