WEB第三次作業(yè)

瀑布流效果圖

image.png

聯(lián)想截圖_20250429170034.png

總結(jié)

效果炫酷，但是圖片文件名如果沒有規(guī)律該怎么辦，改文件名有點(diǎn)麻煩

代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       *{
           margin: 0;
           padding: 0;
           box-sizing: border-box;/*處理公共樣式*/
           position: relative;
       }
       .container{
       width: 98%;
       margin: 0 auto;
       }
       .outer{
           position: absolute;
           width: 210px;
           height: auto;
           padding: 5px;/*存放每張照片的容器*/
           transition: .5s all;
       }
       .inner{
           border: solid 1px #333;
           border-radius: 8px;
           padding: 5px;/*與每一張圖片尺寸相同的容器*/
       }
       img{
           width: 188px;
           height: auto;
           vertical-align: bottom;/*垂直居中，底部對齊，圖片特有的樣式*/
           border-radius: 5px;
       }
   </style>
</head>
<body>
  <div class="container">
      <div class="outer">
       <div class="inner"><img src="./images/img(1).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(2).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(3).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(4).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(5).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(6).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(7).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(8).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(9).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(10).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(11).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(12).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(13).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(14).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(15).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(16).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(17).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(18).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(19).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(20).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(21).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(22).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(23).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(24).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(25).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(26).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(27).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(28).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(29).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(30).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(31).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(32).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(33).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(34).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(35).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(36).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(37).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(38).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(39).jpg" alt=""></div>
      </div>
      <div class="outer">
       <div class="inner"><img src="./images/img(40).jpg" alt=""></div>
      </div>
  </div>
   <script>
       //封裝函數(shù)，實(shí)現(xiàn)布局
       function loadImgs(){
           //獲取容器的寬度()
let container = document.querySelector(".container")
       let c_width = container.offsetWidth
       console.log(c_width)
       //計算一行能放幾張圖片
       let cols = Math.floor(c_width/210)
       console.log(cols)
       //循環(huán)放置圖片，獲取所有的圖片
       let imgs =document.querySelectorAll(".outer")
       //聲明一個數(shù)組，記錄高度
       let arr =[]
       console.log(imgs)
       for(let i=0;i<imgs.length;i++){
           //放置第一行圖片
           if(i<cols){
               console.log(imgs[i])
             imgs[i].style.top=0
             imgs[i].style.left=i*210+"px"
             //記錄圖片的高度
             arr.push(imgs[i].offsetHeight)
             console.log(arr)
           }
           //放置其他圖片
           else{
       //1,獲取最小高度和它的編號
       let minHeight = Math.min(...arr)
       let minIndex = arr.indexOf(minHeight)
       console.log(minHeight,minIndex)
       //2.放置圖片
       imgs[i].style.top = minHeight+"px"
       imgs[i].style.left = minIndex*210+"px"
       //3.更新高度:原來的高度+新的高度
       arr[minIndex]= minHeight+imgs[i].offsetHeight
           }
       }
       }
       //windown中onload事件，指等網(wǎng)頁中所有的數(shù)據(jù)加載完成后執(zhí)行
       window.onload =function(){
           //調(diào)用函數(shù)，放置圖片
         loadImgs()
       }
       //window中onresize,主要是監(jiān)聽瀏覽器窗口是否發(fā)生了調(diào)整
       window.onresize=function(){
           //當(dāng)窗口大小變化后，重新調(diào)整圖片
           loadImgs()
       }
   </script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 用html實(shí)現(xiàn)以下效果 以下是html 以下是css樣式
    霧權(quán)閱讀 66評論 0贊 0
  • 作業(yè)分析 使用html標(biāo)簽實(shí)現(xiàn)網(wǎng)頁中視頻的自動播放和音頻的自動播放，實(shí)現(xiàn)如下效果 代碼實(shí)現(xiàn) 個人總結(jié) 相對簡單，掌...
    馬永躍閱讀 73評論 0贊 0
  • 作業(yè)分析 本次要使用table表格標(biāo)簽編寫如下的效果 代碼實(shí)現(xiàn) 使用HTML標(biāo)簽代碼實(shí)現(xiàn)
    褡氪閱讀 36評論 0贊 0
  • 鼠標(biāo)拖拽效果 代碼實(shí)現(xiàn)
    Mei_1aa9閱讀 33評論 0贊 0
  • 作業(yè)要求 開發(fā)后臺管理系統(tǒng)頁面：管理員登錄頁面、后臺管理系統(tǒng)主頁 圖片示例 代碼演示-管理員登錄頁面 使用Trae...
    MoonArchive閱讀 93評論 0贊 1

友情鏈接更多精彩內(nèi)容