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時就完成一個了循環，即這一行插入進去了，。 ，。
然後進入下一個循環插入下一行。