瀑布流佈局+無限滾動

阿新 • • 發佈：2021-06-23

瀑布流：列對齊方式佈局

無限滾動：到底觸發事件，獲取內容更新至頁面

實現：

通過web api裡的IntersectionObserver，某標籤出現在瀏覽器視口，就觸發回撥，瀑布流通過手動設定圖片位置。

IntersectionObserver參考文件：

https://wangdoc.com/webapi/intersectionObserver.html#%E6%83%B0%E6%80%A7%E5%8A%A0%E8%BD%BD%EF%BC%88lazy-load%EF%BC%89

實現程式碼：

<!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>Document</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }

    .container { 

      position: relative;
    }

    .container>div {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container>div img {
      width: calc(100% - 0.5em);
      margin: 0.2em;
    }
  </style>
</head>

<body>

  < 
div style="height: 2em;display: flex;justify-content: center;align-items: center;">
    頭部
  </div>

  <div class="container">

  </div>

  <div id="bottom" style="height: 2em;display: flex;justify-content: center;align-items: center;">
    底部
  </div>

  <script>

    // 獲取隨機整數
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // 隨機圖片列表(測試用)
    let imgs = [
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F7Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F30adcbef76094b364b18a31ca2cc7cd98c109dbd.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626869559&t=27bf6e2ea4f853fdcb30f8a3f3068981",
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13584429185%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626869720&t=606d140718cd1def9e8ec81c3a1b8d5f",
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftu1.whhost.net%2Fuploads%2F20181207%2F10%2F1544150166-YIVJLsFmDK.jpg&refer=http%3A%2F%2Ftu1.whhost.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626869720&t=6a417c65f0732b4e2a8ed3d0071f1608",
      "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=291238033,2983030545&fm=26&gp=0.jpg",
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F7Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F3ac79f3df8dcd100adaf61ec728b4710b8122fcf.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626870982&t=070f2f6f50e363fb3499711334b85d16",
      "https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/3801213fb80e7bec8c1d93942d2eb9389a506b84.jpg",
    ]

    // 瀑布流高度列表，每次都在最低列上
    let heights = []
    // 瀑布流列數
    let coloum = 5

    // 觀察器，監測底部元素，快到那裡就新增元素
    let observer = new IntersectionObserver((entries, observer) => {
      // 底部只會有一個，所以這樣寫了
      let entrie = entries[0]
      let ratio = entrie.intersectionRatio
      console.log(`漏出${parseInt(ratio * 100)}%`, entries);
      // 獲取圖片
      if (ratio >= 0.2 && ratio <= 1) {
        // 獲取圖片資料

        // 新增元素，每次隨機搞了15個(圖片少可能觸發不了，由圖片高度決定，3行一般是肯定能)
        for (let i = 0; i < 15; i++) {
          let container_div = document.getElementsByClassName("container")[0]
          let div_img = document.createElement("div")
          let img = document.createElement("img")
          // 由於需要更方便的設定內邊距所以圖片外套了一個div
          div_img.style.width = `calc(${100 / coloum - 0.2}%)`
          div_img.append(img)
          // 設定圖片路徑，新增dom
          img.src = imgs[getRandomInt(0, imgs.length - 1)]
          container_div.appendChild(div_img)
          // 圖片載入成功就需要設定位置，不在載入成功搞div撐不起來
          img.onload = () => {
            // 判斷是否是第一行
            if (heights.length < coloum) {
              div_img.style.top = 0
              div_img.style.left = `${div_img.offsetWidth * heights.length}px`
              heights.push(div_img.offsetHeight)
            } else {
              // 找最低一列索引，每次都在最低列下面
              let index = heights.indexOf(Math.min(...heights))
              div_img.style.top = `${heights[index]}px`
              div_img.style.left = `${div_img.offsetWidth * index}px`
              heights[index] += div_img.offsetHeight
            }
            // 手動設定容器高度
            let max_height = Math.max(...heights)
            container_div.style.height = `${max_height}px`
          }
        }
        // 獲取不到圖片,關閉觀察器
        if (document.getElementsByTagName("img").length >= 45) {
          observer.disconnect()
        }
      }
    }, { threshold: [0.2] })

    // 底部標籤漏出5分之1就載入圖片
    observer.observe(document.getElementById("bottom"))

  </script>

</body>

</html>