1. 程序不是响应式，不能实时调整页面宽度；
2. 程序中当新增ajax模拟数据图片后，是将整个页面的所有图片都重新定位一次。
3. 程序是等所有图片加载完成后再读取图片的尺寸，实际中肯定不能这样做。
4. 实际项目中，应该由后台程序给出图片尺寸值，在js代码中直接使用图片的width属性。
本程序思路：
html结构：
<body> <div> <div> <div> <img src="https://www.jb51.net/img/1.jpg" /> </div> </div> <div> <div> <img src="https://www.jb51.net/img/2.jpg" /> </div> </div> ... </div> </body>
一、初始化布局
1. 设置#container为position:relative;
2. 设置.box为float:left;
3. 网页加载后对所有图片进行定位;
3.1 图片宽度是固定的，计算出当前页面每行能容纳的图片数num，并得出#container的宽度，然后设置页面居中；
3.2 循环遍历所有图片，前num个图片默认float布局作为第一行，并存入数组BoxHeightArr = [];
3.3 第一行布局完成后，排布下一个图片，并更新BoxHeightArr[]：
3.3.1 将下一个图片放到第一行最矮图片的下方（用position:absolute定位），也就是BoxHeightArr[]中高度最小的那一列，记录下列数的索引值：minIndex;
3.3.2 更新BoxHeightArr[]中最小的那个值（BoxHeightArr[minIndex]+当前图片的高度）;
3.4 重复循环3.3步骤，直到所有图片都排布完成
二、实时监测滚动高度，是否要加载新数据
1.初始化完成后得到最后一个图片距离顶部的高度： lastContentHeight
2.用window.onscroll = function(){...}
实时监测当前页面的滚动高度为：scrollTop
实时监测当前页面视窗高度为：pageHeight
3. 当页面监测到：lastContentHeight < scrollTop + pageHeight 时，用ajax获取新增图片的json数据。
三、页面底部新增内容
1. 用一个循环，先创建一个新的图片容器，添加到底部，然后将json数据中相应的图片数据如路径等信息写入该容器完成添加图片。
2. 所有新增图片添加完成后，对整个页面的所有图片及布局重新执行步骤一的初始化操作。
项目文件夹：
index.html: 预先置入部分图片数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" href="https://www.jb51.net/css/style.css"/> <script src="https://www.jb51.net/js/app.js"></script> <title>JavaScript瀑布流</title> </head> <body> <div> <div> <div> <img src="https://www.jb51.net/img/1.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/2.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/3.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/4.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/5.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/6.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/7.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/8.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/9.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/10.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/1.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/2.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/3.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/4.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/5.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/6.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/7.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/8.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/9.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/10.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/1.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/2.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/3.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/4.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/5.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/6.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/7.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/8.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/9.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/9.jpg"/> </div> </div> <div> <div> <img src="https://www.jb51.net/img/10.jpg"/> </div> </div> </div> </body> </html>
style.css: