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