先科普下瀑布流吧
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格，像美丽说、淘宝网都有使用。
这是我实现的一个效果，就是怎么滚动都加载不玩。就跟瀑布一样流啊流！
这里的实现方式我们只说Js实现方法
实现原理：
对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度 3 最小列数 ，得到列数后，用一个数组存放盒子所有高度，找出最小高度。之后根据序列号更新高度；看着有些拗口，实现起来就很简单了。
对于滚动加载：即滚动到哪个高度后，需要去加载数据，其实这个就是列的最小高度值，这样当前滚动值和最小高度值比较一下即可判断出来，是否要触发加载数据；就是写一个函数，用来判断是否达到加载图片条件，如果达到，就开始加载。比如获得最后一张图片的offsetTop,可视区高度,滚动距离,也就是当图片的offsetTop小于可视区高度和滚动距离之和的情况下，此时就应该加载了，不过条件可以随便定，也可以等滚动到图片的一半时候在触发加载条件,如图所示:
先上HTML CSS代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>waterfall</title> <script src="https://www.jb51.net/script.js"></script> <style> * { margin: 0; padding: 0; } body { background: yellow; } #container { } #container .pin { padding-left: 15px; padding-top: 15px; float: left; } #container .div-box { float: left; border: 1px solid #ccc; box-shadow: 0 0 5px #bbb; background: #fff; padding: 12px; border-radius: 9px; } #container .div-box img { width: 300px; } #container .div-box p { text-align: center; font-size: 20px; font-weight: bold; color: red; } </style> <script> </script> </head> <body> <div> <div> <div> <img src="https://www.jb51.net/img/1.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/2.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/3.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/4.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/5.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/6.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/7.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/8.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/9.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/10.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/1.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/2.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/3.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/4.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/5.jpg" alt=""> <p>白超华-博客园</p> </div> </div> <div> <div> <img src="https://www.jb51.net/img/6.jpg" alt=""> <p>白超华-博客园</p> </div> </div> </div> </body> </html>
JS代码，每行都有注释