0. 前言
在我們瀏覽各大網站，網頁，手機APP的時候，可能會遇到很多圖片大小不一，看起來雜亂無章，其實，它們是狠有順序的，排列在一起。這就應用到了網站中一種很流行的頁面布局---瀑布流，又稱瀑布流布局。
納尼.jpg
1. 簡介
瀑布流：又稱瀑布流式布局，是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動而不斷加載。
瀑布流.gif
2. 優點
- 操作簡單（滾動鼠標）
- 節省空間
- 用戶體驗好
3. 缺點
- 無限滾動加載模式，頁腳就永遠加載不出來了。
4.代碼實現
4.1 第一步 創建模板
首先你的想好，你想要創建幾列，然后在body中創建好模板
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
4.2 第二步 設置css樣式
設置寫簡單的樣式，讓每個圖片之間有點間隙，通俗易懂點就是，讓照片更有視覺沖擊力，比較有美感。
*{
padding: 0;
margin: 0;
}
#box{
width: 90%;
margin: 20px auto;
}
#box ul{
list-style: none;
float: left;
width: 24%;
margin: 5px;
}
#box ul img{
width: 100%;
margin: 5px;
}
4.3 第三步 添加圖片
現在就是利用js原生循環創建圖片和li。
function createImg (count) {
//循環創建
for(var i = 0; i < count; i++) {
//創建圖片 和 li
var img = document.createElement("img");
img.src = "美女/" + i + ".jpg";
var li = document.createElement("li");
li.appendChild(img);
}
}
//調用函數
createImg(99);
4.4 第四步 怎么把圖片添加到ul中
這時候就要想想怎么把圖片添加到ul，因為這時候圖片大小不一樣，如果你依次循環添加到ul中，可能會出現長的圖片都在一列，短的都在一列，可能會使中間出現一個大的缺口，那么就會很缺少美感。
原創.jpg
所以，我們就可以，每次都找到它的最短的那一列，然后添加到它的后面，不管是誰，只要在添加圖片的時候，只要你短，我就在你后面添加的道理。就能有效的避免剛才那種情況的發生了，吼吼，看代碼吧......
//獲取到所有的ul
var ulArr = document.querySelectorAll("ul");
//假設一個最短的ul
var minHeightUl = ulArr[0];
//循環找到每次最短的然后添加圖片
for (var j = 0; j < ulArr.length; j++) {
if (minHeightUl.offsetHeight > ulArr[j].offsetHeight) {
minHeightUl = ulArr[j];
}
}
minHeightUl.appendChild(li);
4.5 第五步 完成瀑布流之各種型號美女
圖片不能太大，要不然上傳不了，這就尷尬了......
瀑布流之各種型號美女.gif
5. 完整代碼
就知道有些人按捺不住，我懂你，把完整代碼都給你好了吧！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 90%;
margin: 20px auto;
}
#box ul{
list-style: none;
float: left;
width: 24%;
margin: 5px;
}
#box ul img{
width: 100%;
margin: 5px;
}
</style>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script type="text/javascript">
var ulArr = document.querySelectorAll("ul");
function createImg (count) {
for(var i = 0; i < count; i++) {
//創建圖片 和 li
var img = document.createElement("img");
img.src = "美女/" + i + ".jpg";
var li = document.createElement("li");
li.appendChild(img);
//假設一個最短的ul
var minHeightUl = ulArr[0];
for (var j = 0; j < ulArr.length; j++) {
if (minHeightUl.offsetHeight > ulArr[j].offsetHeight) {
minHeightUl = ulArr[j];
}
}
minHeightUl.appendChild(li);
}
}
createImg(99);
</script>
</body>
</html>
6. 結束語
看完我寫的js瀑布流之各種型號美女，有沒有感覺你在噴血啊，哈哈，最后，求點贊，求分享，求打賞！！！！！！
求點贊.gif
