html（注意包裹关系、方便js调用）
复制代码代码如下：
<body>
<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;
Box-Shadow：0px 0px 5px #ccc;
img {
幅：165px;
高さ：自動;
}
}
JavaScript（自己理解的注解）
（函数存在一定瑕疵、仅用于学习理解）
复制代码代码如下：
window.onload = function（）{
滝（ "Main"、 "Box"）;
//调用自定义函数;
var datiant = {"data"：[{"src"： "7.jpg"}、{"src"： "8.jpg"}、{"src"： "9.jpg"}、{"src"： "6.jpg"}]}
//模拟json数据;
window.onscroll = function（）{
if（checkscrollslide）{
//调用自定义函数;根据函数返回值确定滚动是否超出范围;
var oparent = document.getElementById（ "main"）;
for（var i = 0; i <datiant.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）;
//创建ピック块
var oimg = document.createelement（ "img"）;
//创建IMG元素
oimg.src = "images/"+datiant.data [i] .src;
//设置图片引用;
Opic.AppendChild（OIMG）;
};
滝（ "Main"、 "Box"）;
//将动态生成的数据块进行流式布局;
};
};
};
//流式布局主函数、自动调整数据块的位置;
機能ウォーターフォール（親、ボックス）{
//将メイン下的所有box元素取出; "親"代表父级、ボックス代表ボックス元素;
var oparent = document.getElementById（parent）;
//将父级元素赋值给变量oparent;
var oboxs = getbyclass（oparent、box）;
//通过自定义函数、获取父级下的每一个box元素;得到的是所有box元素的集合;
//再次将这个得到的box
// console.log（oboxs.length）;
//在控制台中打印出ボックス元素的数量、用于调试;
var oboxw = oboxs [0] .offsetwidth;
//计算出每一列的宽度; offsetWidth包含内边距在内的宽度;
// 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数组;
if（i <cols）{
//这里符合条件的是第一行的每列的第一个;
harr.push（oboxs [i] .offseetheight）;
//得出每一列的高度放入数组中;
}それ以外{
// box元素已经不是第一行的元素了;
var minh = math.min.apply（null、harr）;
//得出第一行的最小高度并赋值给变量;
// console.log（minh）;
var index = getminhindex（harr、minh）;
//调用自定义函数获取这个变量的インデックス值;
oboxs [i] .style.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（親、クラネーム）{
//通过class获取元素;（在父级parent的容器下获取claname的元素;）
var boxarr = new Array（）;
//声明数组、用来存储获取到的所有クラス为ボックス的元素;
var oelements = parent.getelementsbytagname（ "*"）
//声明变量用来存储此父元素下的所有子元素（*）;
for（var i = 0; i <oelements.length; i ++）{
// oElements;
if（oElements [i] .classname == claname）{
// calss类与参数クラネーム相同;
boxarr.push（oelements [i]）;
// box元素归类到boxarr数组;
};
};
boxarrを返します。
//调用数组后、经过一系列函数、遍历;将得到的数组返回给调用的函数;
};
//获取数组元素的インデックス值;
関数getMinhindex（arr、val）{
// arr是父级数组;val是当前元素;
for（var i in arr）{
//从0开始遍历;
if（arr [i] == val）{
//找到当前元素在数组中对应的インデックス值;
私を返します。
//函数返回值即是当前元素的インデックス值;
};
};
};
//检测是否具备了滚动加载数据块的条件;
function checkscrollslide（）{
var oparent = document.getElementById（ "main"）;
var oboxs = getbyclass（oparent、 "box"）;
var lastboxh = oboxs [oboxs.length-1] .offsettop+math.floor（oboxs [oboxs.length-1] .offsetheight/2）;
//最后一个box元素距离页面顶部的高度（找到最后一个box（oboxs.lenght-1）的オフセット）+自身的一半;
var scrolltop = document.body.scrolltop || document.documentlement.scrolltop;
//浏览器滚动条滚动的距离;
// console.log（scrolltop）;
var height = document.body.clientheight || document.documentelement.clientheight;
//浏览器视口的高度;
// console.log（height）;
return（lastboxh <scrolltop+height）？true：false;
// box元素的オフセット。
};
总结：
用瀑布流来展现照片再好不过了、下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式、也可以用css3实现、很简单、谷歌一下你就知道。
我的思路大概是一张一张的图片插入、当这一行的图片保持长宽比例不变并且高度低于、250时就完成一个了循环、即这一行插入进去了、。
然后进入下一个循环插入下一行。