html（注意包裹关系，方便js调用）
复制代码代码如下：
<身体>
<div ID =“ main”>
<div>
<div>
<img src =“ images/0.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/1.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/2.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/3.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/4.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/2.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/3.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/4.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/5.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/6.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/7.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/3.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/4.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/5.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/3.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/4.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/5.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/6.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/7.jpg”>
</div>
</div>
<div>
<div>
<img src =“ images/3.jpg”>
</div>
</div>
</div>
</body>
少（少预编译）
复制代码代码如下：
* {
保证金：0;
填充：0;
}
＃主要的 {
位置：相对；
}
。盒子 {
填充：15px 0 0 15px;
浮子：左；
}
.pic {
填充：10px;
边界：1PX实心#CCC;
边界拉迪乌斯：5px;
盒子阴影：0px 0px 5px #ccc;
img {
宽度：165px;
身高：自动；
}
}
JavaScript（自己理解的注解）
（函数存在一定瑕疵，仅用于学习理解）
复制代码代码如下：
window.onload = function（）{
瀑布（“ Main”，“ Box”）;
//调用自定义函数;作用于主box元素;
var dataint = {“ data”：[{“ src”：“ 7.jpg”}，{“ src”：“ 8.jpg”}，{“ src”：“ 9.jpg”}，{“ src”：“ src”：“
//模拟json数据;
window.scroll = function（）{
if（checkScrollSlide）{
//调用自定义函数;根据函数返回值确定滚动是否超出范围;
var oparent = document.getElementById（“ main”）;
for（var i = 0; i <dataint.data.length; i ++）{
var obox = document.createelement（“ div”）;
obox.ClassName =“ box”;
Oparent.AppendChild（Obox）;
//创建框块
var opic = document.createelement（“ div”）;
opic.classname =“ pic”;
Obox.AppendChild（OPIC）;
//创建pic块
var oimg = document.createelement（“ img”）;
//创建img元素
oimg.src =“ images/”+dataint.data [i] .src;
//设置图片引用;
Opic.AppendChild（OIMG）;
};
瀑布（“ Main”，“ Box”）;
//将动态生成的数据块进行流式布局;
};
};
};
//流式布局主函数，自动调整数据块的位置;
功能瀑布（父，框）{
//将主box元素取出;“ parent”代表父级，框box元素;
var oparent = document.getElementById（parent）;
//将父级元素赋值给变量
var oboxs = getByClass（toparent，box）;
//通过自定义函数，获取父级下的每一个框元素;得到的是所有框元素的集合;
//再次将这个得到的框元素的集合赋值给obox;（因为作用域问题，变量不共用）;
// console.log（oboxs.length）;
//在控制台中打印出框元素的数量，用于调试;
var oboxw = oboxs [0] .offsetWidth;
//计算出每一列的宽度; OuttsetWidth包含内边距在内的宽度;
// console.log（oboxw）;测试;
var cols = math.floor（document.documentElement.ClientWidth/oboxw）;
//计算整个页面显示的列数（页面宽/box的宽）;
oparent.Style.csstext =“ width：”+oboxw*cols+“ px; margin：0 auto”;
//父元素main的宽度=每一列的宽*列数;并且左右居中;并且左右居中;
var harr = [];
//存放每一列高度的数组;
for（var i = 0; i <oboxs.length; i ++）{
//遍历oboxs数组;
如果（i <cols）{
//这里符合条件的是第一行的每列的第一个;
harr.push（oboxs [i] .offseight）;
//得出每一列的高度放入数组中;
}别的{
// box元素已经不是第一行的元素了;
var minh = math.min.apply（null，harr）;
//得出第一行的最小高度并赋值给变量;
// console.log（minh）;
var index = getminhindex（Harr，Minh）;
//调用自定义函数获取这个变量的索引值;
oboxs [i] .pstyle.position =“ absolute”;
oboxs [i] .style.top = minh+“ px”;
oboxs [i] .style.left = oboxw*index+“ px”;
//设置当前元素的位置;
//当前元素的左值=顶上的元素的索引值*每列的宽度;
//oboxs [i] style.left = oboxs [index] .offsetLeft+“ px”;
//第二种获取当前元素的左值;
//此时在第索引列添加了一个框元素;
harr [index]+= oboxs [i] .offsetheight;
//每一列更新后的高度=每一列原来的高度+box元素的高度;
};
};
};
// js原生通过类;
函数getByClass（parent，claname）{
//通过班获取元素;（在父级父级的容器下获取claname的元素;）
var boxarr = new array（）;
//声明数组，用来存储获取到的所有类box的元素;
var oelements = parent.getElementsbytagname（“*”）
//声明变量用来存储此父元素下的所有子元素（*）;
for（var i = 0; i <oelements.length; i ++）{
//遍历数组启动；
if（oelements [i] .className == claname）{
//如果数组中的某一个元素的cals类与参数claname相同;
boxarr.push（oelements [i]）;
// box元素归类到boxarr数组;
};
};
返回boxarr;
//调用数组后，经过一系列函数，遍历;将得到的数组返回给调用的函数;
};
//获取数组元素的索引值;
函数getminhindex（arr，val）{
// arr是父级数组;val是当前元素;
对于（arr）{var i）{
//从0开始遍历;
如果（arr [i] == val）{
//找到当前元素在数组中对应的索引值;
返回我；
//函数返回值即是当前元素的索引值;
};
};
};
//检测是否具备了滚动加载数据块的条件;
函数checksCrollSlide（）{
var oparent = document.getElementById（“ main”）;
var oboxs = getByClass（offarent，“ box”）;
var lastboxh = oboxs [oboxs.length-1] .offsettop+Math.floor（oboxs [oboxs.length-1] .forpSetheight/2）;
//最后一个框元素距离页面顶部的高度（找到最后一个框（oboxs.lenght-1）的offsettop）+自身的一半;
var scrolltop = document.body.scrolltop || document.documentElement.scrolltop;
//浏览器滚动条滚动的距离;
// console.log（scrolltop）;
var Height = document.body.clientheight || Document.DocumentElement.ClientHeight;
//浏览器视口的高度;
// console.log（高度）;
返回（lastboxh <scrolltop+height）？true：false;
//页面滚动的距离是否大于最后一个框元素的offsettop;
};
总结：
用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用，css3实现
我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于，250时就完成一个了循环，即这一行插入进去了，。，。
然后进入下一个循环插入下一行。