本文將介紹瀑布流式布局頁面的概念和設計原理。瀑布流式布局頁面以其獨特的排列方式和吸引人的視覺效果而備受歡迎。我們將詳細探討如何實現(xiàn)瀑布流式布局，包括元素的動態(tài)定位和適應性，以及如何優(yōu)化加載性能和響應式設計。通過本文的指導，您將能夠創(chuàng)建出令人驚嘆的瀑布流式布局頁面。
瀑布流式頁面布局是什么？
瀑布流式布局頁面是一種以瀑布流為靈感的設計方式，將內容塊以不規(guī)則的方式排列在頁面上，形成一種流動的視覺效果。瀑布流式布局最初在照片墻等圖片展示網站上得到廣泛應用，如今已經成為許多網頁設計中的熱門趨勢。通過瀑布流式布局，您可以展示大量內容，吸引用戶的注意力，并提供出色的用戶體驗。
小紅書中的瀑布流式頁面布局
手機京東中的瀑布流式頁面布局
實現(xiàn)瀑布流式布局
要實現(xiàn)瀑布流式布局，需要考慮以下幾個關鍵方面：
- 元素的動態(tài)定位：瀑布流式布局的核心是將元素以不同的高度和寬度進行排列。在實現(xiàn)時，您可以使用 CSS 的定位屬性（如position: absolute）來動態(tài)定位每個元素。通過計算元素的位置，您可以在頁面上創(chuàng)建出瀑布流的效果。
- 元素的適應性：由于瀑布流式布局中的元素大小和位置會根據內容的不同而變化，因此需要考慮元素的適應性。您可以使用 CSS 的彈性盒子布局（Flexbox）或網格布局（Grid）等技術來實現(xiàn)元素的自適應性，使其在不同屏幕尺寸和設備上都能展現(xiàn)出良好的效果。
- 加載性能優(yōu)化：由于瀑布流式布局頁面通常會加載大量的內容塊，因此需要考慮加載性能的優(yōu)化。您可以使用延遲加載（Lazy Loading）技術，只在用戶滾動到可見區(qū)域時才加載可視元素，從而減少初始加載時間和網絡帶寬的使用。
- 響應式設計：在設計瀑布流式布局頁面時，要考慮不同設備和屏幕尺寸的響應式布局。通過使用媒體查詢和彈性布局技術，您可以為不同的設備提供最佳的用戶體驗，并確保內容在各種屏幕上都能正確顯示和排列。
代碼實現(xiàn)
html
<!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>瀑布流式頁面布局</title> <link rel="stylesheet" href="style.css">
</head>
<body>
<!-- container容器用來存放box容器，一個box放一張圖片 -->
<div id="container">
<!-- 根據自己的需求添加圖片的數(shù)量 -->
<div class="box">
<div class="box-img"><img src="./img/1.jpg" alt=""></div>
</div>
<div class="box">
<div class="box-img"><img src="./img/2.jpg" alt=""></div>
</div>
、、、
<div class="box">
<div class="box-img"><img src="./img/10.jpg" alt=""></div>
</div>
<div class="box">
<div class="box-img"><img src="./img/12.jpg" alt=""></div>
</div>
</div>
<script type="text/javascript" src="waterfall.js">
</script>
</body>
</html>css
*{
margin: 0;
padding: 0;
}
.box{
float: left;
padding: 5px;
}
.box-img{
width: 165px; // 圖片的寬度，他會決定一行能放多少張圖片
padding: 5px;
border: 1px solid #ccc;
}
img{
width: 100%;
}js
// 讀取用戶屏幕第一行放了多少張圖
// 操作下一張圖，找到上一行最矮的高度，將圖片排放到其下方
function imgLocation(parent,content){ // 當前有多少圖片要擺放
// 獲取到大盒子cparent(大盒子內存放了很多個box，其中每一個box盒子存放著一張圖片)
var cparent = document.getElementById(parent)
// 將大盒子cparent中所有的box盒子存放在一個數(shù)組ccontent中
var ccontent = getChildElement(cparent,content)
// 獲取到第一張圖片的寬度(已知每一張圖片的寬度都相同)
var imgWidth = ccontent[0].offsetWidth
// 其中num計算后為頁面一行能存放圖片的張數(shù)，也就是一行能放多少個box盒子
// document.documentElement.clientWidth 獲取整個屏幕的寬度
var num = Math.floor(document.documentElement.clientWidth/imgWidth)
cparent.style.cssText = `width: ${imgWidth*num}px`
// 創(chuàng)建一個數(shù)組用來存放第一行每個圖片的高度(此處高度會隨著新圖片的插入而變大)
var BoxHeightArr = []
for(var i=0; i<ccontent.length; i++){
if(i<num){
// 先將第一行放滿
BoxHeightArr[i] = ccontent[i].offsetHeight
}else{ // 要操作的圖
/* 找到高度最小值圖片對應的下標 */
// 獲取到第一行中的高度最小值
// apply為借用前面的Math.min方法給數(shù)組，不能直接使用Math.min找到數(shù)組中的最小值
var minHeight = Math.min.apply(null,BoxHeightArr)
// 找到高度最小值對應在數(shù)組BoxHeightArr中的下標
var minIndex = BoxHeightArr.indexOf(minHeight)
/* 找到高度最小值圖片對應的下標 */
/* 新插入的圖片進行定位 */
// 將新要插入的圖片設置為絕對定位
ccontent[i].style.position = 'absolute'
// 將新要插入的圖片的頂部到頁面頂部的距離設置為找到的最小的高度值
ccontent[i].style.top = minHeight +'px'
// 將新要插入的圖片的左邊到頁面左邊的距離設置和最小高度圖片的左邊到頁面的距離相同，
// 使兩張圖片左邊對齊
ccontent[i].style.left = ccontent[minIndex].offsetLeft+'px'
/* 新插入的圖片進行定位 */
// 更新這一列的高度(這里很關鍵，因為數(shù)組中只會存放num（一行放圖片的數(shù)目）個元素，
// 所以插入新圖片后原來高度最小值就未必是最小了)
BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight
}
}
}
// 定義一個函數(shù)獲取一個容器內中某個容器的數(shù)目(此處為獲取所有container容器內的box容器)
function getChildElement(parent,content){
var contentArr = []
var allContent = parent.getElementsByTagName("*")
for(var i=0;i<allContent.length;i++){
if(allContent[i].className == content){
contentArr.push(allContent[i])
}
}
return contentArr
}
imgLocation('container','box')總結
瀑布流式布局頁面提供了一種創(chuàng)新和引人注目的方式來展示內容。通過動態(tài)定位和適應性，瀑布流式布局可以為您的網頁帶來令人驚嘆的視覺效果。同時，通過加載性能優(yōu)化和響應式設計，您可以確保頁面在各種設備上都能提供出色的用戶體驗。
