最近心血來潮想要來了解一下瀑布流切版，所以就查了一堆資料來看，今天就來記錄一下瀑布流切版到底是什麼？還有要怎麼用JavaScript實作？
什麼是瀑布流切版？
這個是最常見的一般排版
這個是瀑布流的排版
所謂的瀑布流切版就是一種像瀑布一樣垂直落下的排版版型，所以每個一個item不再像一般的排版一樣像一個表格，而是會讓item維持他自己的高度，讓他自己往下延伸，看起來就會變成一種不規則的版型。
item和item的間隔就會呈現像是爬樓梯遊戲一樣的線條(?)，看起來有點不規則。
要呈現這樣的版型，會有三個重點：
第一是每個item的寬度維持一樣。
第二是高度依照item內容物自然長高。
第三是每一個item都會緊接著上面的item往下排列。
瀑布流的實作大方向
1. 第一列每一個item從左至右排列，當超過整個畫面的寬，就會往下一排排列。
2. 從第二排開始，item會從第一排裡面高度最小的item底下開始排。
為了達成以上這兩點，並且讓它循環下去，一直到item被擺放完畢，需要計算或記錄以下幾點資訊。
1. 計算一列最多可以放入幾個item
2. 紀錄第一列所有item的高度
3. 從第二列開始放入item後，還要把對應排序的item高度也更新進去
瀑布流切版的正式實作
這個階段開始直接進入實作內容吧！
1. 首先，準備好html的部分，這裡就是很簡單外層一個container，包著好幾個item(class = ‘photo’)。這裡比較單純，就直接跳過不詳細說明了，想確認詳細的html內容，可以點擊這裡。
2. 用變數定義好每個item之間的間距，並且取得container和item的DOM。
3. 接下來先定義出一個讓排版可以呈現瀑布流排版的function，並且讓這個function在「畫面一進來」和「畫面寬度有改變」的時候呼叫執行這個function。
4. 再來就是讓瀑布流排版呈現的重點內容了，也就是完成function內的內容。
(1) 首先取得「container的寬度」和「item的寬度」。
*因為前面透過getElementClassName取得class為photo的item，會取得一個陣列，但只需要知道其中一個item的寬度，所以用photo[0]來獲得width的值。
(2) 計算一列最多可以放入多少item，也就是說一列最多可以有幾欄。 在這邊是用container/(item寬度+間距)來計算，因為圖片和圖片間要有空隙，所以要把它加進去計算。
(3) 先準備一個陣列來給後面紀錄第一列item的高度。
(4) 最後要來把item一個個放進container中，這裡我們會透過for迴圈來將item一個個地放入。
for迴圈內的詳細內容如下：
在for迴圈中，我們要先把第一排先排滿，所以會用前面計算出的一列最多可以有幾欄來放置第一排的item。一邊放入item，一邊也把被放入第一列的item們的高記錄在陣列中(也就是push()的那部分)。
接下來再把剩下的item從第二列開始一個個排上去，但記得喔！從第二列開始就要從第一列中高度最低的item後面開始擺放剩下的item，所以必須從記錄第一列item高度的陣列中找出最小的數字。
除此之外，還必須取得目前第一列中高度最小的那個item的index，這部分是為了要把第二列要放入的item從左至右對到對應的位置，也就是找到left要設定多少；top的部分則是要記得加上item和item間的間距gap(間距的部分除了左右的間距外，還有上下的間距)，最後也別忘了把放上下一列的item高度更新到陣列中，就這樣反覆進行這些步驟到排完所有item為止。
所以從第二列開始放的部分可以再分成以下幾個步驟：
(1) 從第一列item高的陣列中取得最小的高，並且記錄下這個最小高的item的index。
(2) 把第一列item的最小的高度+間距設定成現在要擺放的item的top，拿最小高的item的offsetLeft設定成要擺放的item的left。
(3) 把已經放上第二列的item高度加總並更新到一開始記錄的高度陣列中。
(如下圖，當下一列的第一個item被擺放上去後，第一列的第四個物件的高度就會被更新成「原本的高度+間距+新的item<黃色的>的高度」)
以上這樣就完成瀑布流的排版了！
完整的切版內容可以點擊這裡查看
為什麼從第二列開始要從高度最矮的item後面開始排呢？
最後再來思考一下，為什麼要用從高度最矮的item後面把item擺放去！
如果從第一個item底下開始排，就無法知道現在一列的最後一個位置，並且應該要從下一列的第一個位置開始排起。但是從高度最低的item後面接續排，就能讓function不斷依循這樣的邏輯把item擺完。
好啦！以上就是這次的學習內容，就記錄到這裡啦！掰餔～
