App下載

大廠也在用的瀑布流式頁面布局

萌傻卿 2024-01-30 14:07:41 瀏覽數(shù) (2489)
反饋

本文將介紹瀑布流式布局頁面的概念和設(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)。

小紅書中的瀑布流式頁面布局

Snipaste_2024-01-30_13-39-29

手機(jī)京東中的瀑布流式頁面布局

20240130-134703

實(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)。


前端 Flex

0 人點(diǎn)贊