.jpg)
瀑布流的實(shí)現(xiàn)主要有兩種方式：css3和JavaScript。1.css3通過column-count和column-gap屬性實(shí)現(xiàn)多欄布局，適用于靜態(tài)內(nèi)容，代碼簡(jiǎn)單但控制力弱；2.javascript通過計(jì)算每列高度并動(dòng)態(tài)定位圖片，靈活可控，適合動(dòng)態(tài)內(nèi)容。此外，還需處理圖片加載失敗、實(shí)現(xiàn)懶加載（監(jiān)聽滾動(dòng)事件并加載可視區(qū)域內(nèi)的圖片）以及性能優(yōu)化（如圖片壓縮、減少dom操作、使用節(jié)流函數(shù)等）。兩種方式可根據(jù)實(shí)際需求選擇使用。
瀑布流，簡(jiǎn)單說就是參差不齊的多欄布局，圖片高度不一，像瀑布一樣傾瀉而下。關(guān)鍵在于讓頁(yè)面看起來靈動(dòng)不死板，又能高效利用空間。
直接輸出解決方案即可：
要實(shí)現(xiàn)瀑布流，核心在于計(jì)算每張圖片應(yīng)該放在哪一列，以及如何動(dòng)態(tài)調(diào)整這些圖片的位置。這里主要介紹兩種常見的實(shí)現(xiàn)方式：css3 和 JavaScript。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
CSS3 實(shí)現(xiàn)（ masonry.JS 替代方案）
CSS3 的 column-count 和 column-gap 屬性可以快速實(shí)現(xiàn)基本的瀑布流，但控制力較弱，可能出現(xiàn)圖片排序混亂的情況。
<div class="waterfall"> @@##@@ @@##@@ @@##@@ ... </div> <style> .waterfall { column-count: 3; /* 設(shè)置列數(shù) */ column-gap: 10px; /* 設(shè)置列間距 */ } .waterfall img { width: 100%; /* 圖片寬度撐滿容器 */ margin-bottom: 10px; /* 圖片間距 */ break-inside: avoid; /* 避免圖片被分割在兩列 */ } </style>
這種方式簡(jiǎn)單粗暴，但對(duì)圖片的加載順序和高度變化不敏感，適合靜態(tài)內(nèi)容或者對(duì)排序要求不高的場(chǎng)景。break-inside: avoid 是關(guān)鍵，它可以避免圖片被截?cái)唷?/p>
JavaScript 實(shí)現(xiàn)（更靈活的控制）
JavaScript 實(shí)現(xiàn)的核心思路是：
- 確定列數(shù)： 根據(jù)容器寬度和圖片寬度計(jì)算出列數(shù)。
- 維護(hù)列高數(shù)組： 創(chuàng)建一個(gè)數(shù)組，記錄每一列當(dāng)前的高度。
- 計(jì)算圖片位置： 遍歷圖片，找到高度最小的那一列，將圖片添加到該列，并更新該列的高度。
- 動(dòng)態(tài)調(diào)整： 監(jiān)聽窗口大小變化和圖片加載完成事件，重新計(jì)算布局。
<div class="waterfall" id="waterfall"> @@##@@ @@##@@ @@##@@ ... </div> <style> .waterfall { position: relative; /* 必須設(shè)置 */ } .waterfall img { position: absolute; /* 絕對(duì)定位 */ width: 200px; /* 固定圖片寬度 */ } </style> <script> const waterfall = document.getElementById('waterfall'); const images = waterfall.getElementsByTagName('img'); const imageWidth = 200; // 圖片寬度 let columnCount = 0; let columnHeights = []; function calculateLayout() { const containerWidth = waterfall.offsetWidth; columnCount = Math.floor(containerWidth / imageWidth); columnHeights = new Array(columnCount).fill(0); // 初始化列高數(shù)組 } function positionImages() { for (let i = 0; i < images.length; i++) { let minHeight = Math.min(...columnHeights); let columnIndex = columnHeights.indexOf(minHeight); images[i].style.left = columnIndex * imageWidth + 'px'; images[i].style.top = minHeight + 'px'; columnHeights[columnIndex] += images[i].offsetHeight + 10; // 加上圖片高度和間距 } // 設(shè)置容器高度，避免塌陷 waterfall.style.height = Math.max(...columnHeights) + 'px'; } window.onload = function() { calculateLayout(); positionImages(); } window.addEventListener('resize', function() { calculateLayout(); positionImages(); }); </script>
這段代碼的關(guān)鍵點(diǎn)在于 position: absolute 和 left、top 屬性的計(jì)算。需要注意的是，圖片寬度需要固定，否則計(jì)算會(huì)變得復(fù)雜。 同時(shí)，需要處理圖片加載完成后的重新布局，可以使用 img.onload 事件。
瀑布流圖片加載不出來怎么辦？
圖片加載不出來，可能是網(wǎng)絡(luò)問題，也可能是代碼邏輯問題。
- 檢查網(wǎng)絡(luò)： 確認(rèn)圖片鏈接是否有效，嘗試在瀏覽器中直接訪問圖片鏈接。
- 圖片路徑： 檢查圖片路徑是否正確，相對(duì)路徑和絕對(duì)路徑是否混淆。
- 加載順序： 如果圖片數(shù)量很多，可以考慮使用懶加載，避免一次性加載所有圖片，導(dǎo)致頁(yè)面卡頓甚至崩潰。
- 錯(cuò)誤處理： 添加圖片加載失敗的處理邏輯，例如顯示默認(rèn)圖片或提示信息。
// 圖片加載失敗處理 images[i].onerror = function() { this.src = 'default.jpg'; // 顯示默認(rèn)圖片 };
瀑布流如何實(shí)現(xiàn)懶加載？
懶加載的核心思想是：只加載可視區(qū)域內(nèi)的圖片，當(dāng)圖片滾動(dòng)到可視區(qū)域時(shí)才加載。
- 監(jiān)聽滾動(dòng)事件： 監(jiān)聽 window.onscroll 事件。
- 判斷是否在可視區(qū)域： 判斷圖片是否進(jìn)入可視區(qū)域，可以使用 getBoundingClientRect() 方法獲取圖片的位置信息。
- 替換圖片鏈接： 將 data-src 屬性中的圖片鏈接賦值給 src 屬性，觸發(fā)圖片加載。
@@##@@ <script> function lazyLoad() { const images = document.querySelectorAll('img[data-src]'); for (let i = 0; i < images.length; i++) { if (isInViewport(images[i])) { images[i].src = images[i].dataset.src; images[i].removeAttribute('data-src'); // 避免重復(fù)加載 } } } function isInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } window.addEventListener('scroll', lazyLoad); window.addEventListener('resize', lazyLoad); window.addEventListener('load', lazyLoad); // 頁(yè)面加載完成時(shí)執(zhí)行一次 </script>
placeholder.gif 是一張占位圖片，可以是一個(gè)簡(jiǎn)單的 loading 圖標(biāo)。 data-src 屬性用于存儲(chǔ)真實(shí)的圖片鏈接。
瀑布流如何優(yōu)化性能？
瀑布流的性能瓶頸主要在于大量的 DOM 操作和圖片加載。
- 圖片優(yōu)化： 使用合適的圖片格式（webp），壓縮圖片大小，使用 CDN 加速圖片加載。
- 減少 DOM 操作： 避免頻繁的 DOM 操作，可以使用節(jié)流或防抖來限制 resize 和 scroll 事件的觸發(fā)頻率。
- 虛擬滾動(dòng)： 對(duì)于數(shù)據(jù)量非常大的瀑布流，可以考慮使用虛擬滾動(dòng)，只渲染可視區(qū)域內(nèi)的圖片。
- CSS3 硬件加速： 對(duì)于需要?jiǎng)赢嬓Ч钠俨剂?，可以使?CSS3 硬件加速，例如 transform: translate3d(0, 0, 0)，提高動(dòng)畫性能。
// 節(jié)流函數(shù) function throttle(func, delay) { let timeoutId; let lastExecTime = 0; return function(...args) { const context = this; const currentTime = new Date().getTime(); if (!timeoutId) { if (currentTime - lastExecTime >= delay) { func.apply(context, args); lastExecTime = currentTime; } else { timeoutId = setTimeout(function() { func.apply(context, args); lastExecTime = new Date().getTime(); timeoutId = null; }, delay - (currentTime - lastExecTime)); } } }; } window.addEventListener('resize', throttle(function() { calculateLayout(); positionImages(); }, 200)); // 200ms 節(jié)流
總而言之，瀑布流的實(shí)現(xiàn)方式有很多種，選擇哪種方式取決于具體的應(yīng)用場(chǎng)景和需求。CSS3 實(shí)現(xiàn)簡(jiǎn)單快速，但控制力較弱；JavaScript 實(shí)現(xiàn)靈活可控，但需要更多的代碼和優(yōu)化。
.png)
