個人對瀑布流佈局理解： 每列的寬度相等而高度不等，且第二行的第一個容器需要放在第一行高度最小的容器下麵，依次類推放置。 附上代碼： 代碼僅實現了瀑布流的佈局方式和 resize 監聽，如果大家有需要，可以自己拓展下：實現監聽滾動事件，頁面滾動載入圖片的功能。 代碼中寫了詳細註釋，可以直接使用。 <! ...
個人對瀑布流佈局理解：
每列的寬度相等而高度不等，且第二行的第一個容器需要放在第一行高度最小的容器下麵，依次類推放置。
附上代碼：
代碼僅實現了瀑布流的佈局方式和 resize 監聽，如果大家有需要，可以自己拓展下：實現監聽滾動事件，頁面滾動載入圖片的功能。
代碼中寫了詳細註釋，可以直接使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>瀑布流佈局JS實現</title> </head> <body> <style> * { margin: 0; padding: 0; } body { width: 100vw; height: 100vh; } .container { width: 100vw; height: 100vh; overflow: scroll; position: relative; background-color: lightgray; } .item { width: 200px; height: auto; box-sizing: border-box; background: #fff; border: 1px solid #000; border-radius: 15px; text-align: center; font-size: 40px; font-weight: bold; position: absolute; top: 0; left: 0; } .item1, .item8 { height: 300px; } .item2, .item6 { height: 150px; } .item3, .item9 { height: 120px; } .item4, .item10 { height: 270px; } .item5, .item7 { height: 350px; } </style> <div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> <div class="item item6">6</div> <div class="item item7">7</div> <div class="item item8">8</div> <div class="item item9">9</div> <div class="item item10">10</div> </div> <script> function waterFullLayout() { console.log("start"); // 獲取頁面寬度 let pageWidth = document.getElementsByClassName("container")[0].clientWidth; // 獲取圖片固定的寬度 let itemWidth = document.getElementsByClassName("item")[0].offsetWidth; // 設置圖片之間間距 let gap = 10; // 獲取一行最多可以展示幾張圖片 let nums = Math.floor(pageWidth / (itemWidth + gap)); // 瀑布流實現原則： // 所有圖片元素絕對定位，從第二行開始，依次從第一行圖片元素高度最小的下方填充，這裡註意，不是從左至右填充，即優先填補空位，填補一個後，再填補下一個較大的空位 // 定義第一行圖片的所有高度的數組，之後每張圖片下方填充圖片後，會更新數組對應位置下的最小高度 let heightList = []; let itemArr = document.getElementsByClassName("item"); let imgLen = itemArr.length; for (let i = 0; i < imgLen; i++) { // 如果 當前圖片元素索引小於一行最多可以展示的圖片個數，說明是第一行，top 已在css中預設設置為0，需要統一設置 left 值,top值如果加gap，則還需設置gap值 if (i < nums) { // 將第一行的圖片元素的高度放入 heightList 數組 heightList.push(itemArr[i].offsetHeight + gap); itemArr[i].style.top = gap + "px"; itemArr[i].style.left = (itemWidth + gap) * i + "px"; } else { // 否則從第二行開始，要根據第一行圖片元素的高度，設置top和left // 先假設 heightList[0] 為最小高度 let minItem = { minHeight: heightList[0], minIndex: 0, }; for (let j = 0; j < heightList.length; j++) { if (heightList[j] < minItem["minHeight"]) { minItem["minHeight"] = heightList[j]; minItem["minIndex"] = j; } } itemArr[i].style.top = minItem["minHeight"] + gap + "px"; itemArr[i].style.left = (itemWidth + gap) * minItem["minIndex"] + "px"; // 關鍵步驟，更新 heightList 中對應位置下整列圖片的高度，以便在下次迴圈時根據heightList 重新尋找最小高度 heightList[minItem["minIndex"]] = parseFloat(itemArr[i].style.top) + parseFloat(itemArr[i].offsetHeight); } } } // 防抖 function debounce(fn, delay) { let timer = null; return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, arguments); }, delay); }; } window.onload = function () { // 為了保證頁面寬度可以正常獲取，onload 之後再執行 waterFullLayout(); }; // 頁面寬度變化要重新佈局 window.onresize = debounce(waterFullLayout, 100); </script> </body> </html>
實現後效果如下：
參考鏈接：
https://blog.csdn.net/qq_43432158/article/details/121903435
