1. 確定瀏覽器顯示區域內，一行放多少列盒子（寬度一致，高度由內容撐開）；
1.1 獲取頁面寬度
1.2 獲取盒子寬度
1.3 顯示的列數 = 頁面寬度 / 盒子寬度
2. 確定列數之後，先排列第一行
2.1 顯示的列數 = 頁面寬度/（盒子寬度+間隙）；
2.2for迴圈裡判斷 當i（盒子的索引）小於column（列數）的時候，說明在第一行
2.3 知道在第一行之後，動態設定每個盒子的left值來排列第一行
left = i * ( itemwidth + gap );
3. 第一行排好之後，獲取第一行所有盒子的高度
3.1 定義乙個空陣列，放高度，第二行的top值需要根據第一行的高度來設定
3.2 獲取高度的時候要注意，程式必須寫在入口函式onload裡面，因為的載入特性是：等頁面都載入完之後才去請求載入，所以不寫在入口函式裡可能會出現高度獲取不到的情況。
4. 通過定位的方式排列第二行
4.1 獲取到剛剛陣列中，高度最小的那一列，將第2行的第1個盒子放置在它的下方；
4.2 此時的left值就是高度最小列的offsetleft；top值就是：第1行高度最小列的高度(為了布局美觀可以加上上下間隙gap)。
4.3記錄下高度最小列的索引index，後面計算會用到；
4.4 設定完成之後，會發現後面所有的都疊在這個高度最小列的下面，原因就是此時的最小列高度沒有改變，應該加上下面的高度，得出乙個新高度。
4.5 此時的這一列高度其實已經發生改變了，所以需要將新高度賦值給陣列 當前高度最小列的高度 = 當前高度最小列的高度 + 間隙 + 下面盒子的高度
5. 觸發resize事件
將整個設定樣式的部分封裝成乙個函式，在onload裡面註冊乙個resize事件，只要頁面一發生改變，就觸發樣式部分的**。實時改變pagewidth的寬度，這樣瀑布流就會是乙個響應式的效果了。
6.懶載入效果
6.1 目前我們用的是30張，假如乙個頁面中有幾百張的時候，我們不可能等到它都載入完再顯示，所有這裡引入乙個懶載入的概念，我們規定第30張為顯示的最後一張，當滾動條滾動到30張的時候，應該載入下一批。
6.2 即頁面可視區高度+滾動條卷去的高度 = 第30的offsettop；的時候載入下面的。
瀑布布局流 原生js
首先html和css 然後單單左浮動是不會 插空 插入的，這裡就是我們的重點啦。首先 都是要絕對定位的。確定好乙個頁面有多少列，每插入一張就計算每一列的高度，取最短的那列插入，計算該插入的top和left再賦值，絕對定位定在那裡，就ok啦 function wate ll parent,pin el...
原生js寫瀑布流
準備用自學的jquery寫的，但是不熟悉api，忘得乾乾淨淨了，然後我覺得我直接用js寫比用jquery還要簡單一點 這是html布局 js 1.獲取視口的寬度，獲取每個的寬度 2.遍歷迴圈每個 3.設定top和left top 第一行設定為0,第二行開始 最小高度 left i imgw 必須等所...
原生JS響應式瀑布流
如何產生響應式列 動態獲取視窗的尺寸 獲取到列的固定寬度 響應式列數 動態獲取視窗的尺寸 獲取到列的固定寬度 如何獲取響應式列的最小高度？把產生的列容器放在乙個陣列裡面 這個陣列使用sort 方法進行公升序排列 產生的新陣列的第一位就是高度最小的列 charset utf 8 title cols ...