JavaScript實現(xiàn)瀑布流布局詳解

更新時間：2022年07月25日 10:38:06 作者：蓋玥希圈外男友(???)

這篇文章主要為大家詳細介紹了JavaScript瀑布流的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

需求

所謂瀑布流布局，就是含有若干個等寬的列，每一列分別放置圖片、視頻等，放置的元素都是等寬的，因此可能是不等高的。新的元素到來時，會插入高度較低的那一列，這樣形成參差的、視覺上像瀑布一樣的布局。

這里簡化一下，只要兩列等寬布局展示圖片即可。

思路

兩列布局，直接使用flex布局實現(xiàn)即可。不過，這里不能設置align-items為center，如果設置了將會使圖片列居中顯示，不符合瀑布流的視覺效果。我設置left和right兩列，兩列的寬度相等，結構和樣式基本就寫完了。

然后寫JavaScript。其邏輯是，判斷當前l(fā)eft和right的高度（我使用clientHeight），如果左邊<=右邊，則放入左邊，否則放入右邊。遍歷所有的圖片，按照這個邏輯放入即可。

代碼實現(xiàn)

html部分

<!-- 瀑布流父容器 -->
  <div class="container">
    <!-- 兩列等寬布局 -->
    <div class="col left"></div>
    <div class="col right"></div>
  </div>

css部分

    .container {
      width: 700px;
      background-color: aliceblue;
      margin: auto;
      /* flex布局 */
      display: flex;
      align-items: flex-start;
    }
    .col {
      flex-basis: 350px;
    }
    .col img {
      /* 固定圖片的寬度 */
      width: 100%;
    }

JavaScript部分

  // 獲取三個元素
  let container = document.getElementsByClassName('container')[0]
  let left = document.getElementsByClassName('col')[0]
  let right = document.getElementsByClassName('col')[1]
  // 插入圖片
  function initImg() {
    for (let i = 1; i < 27; i++) {
      let img = new Image();
      img.src = "./pictures/" + i + ".jpg"
      if (left.clientHeight <= right.clientHeight) {
        left.appendChild(img)
      } else {
        right.appendChild(img)
      }
    }
  }
  initImg()

如代碼所示，獲取了父元素和左右兩列，然后遍歷每一張圖片，依次判斷插入即可?？瓷先ズ芡昝?，但是真的如此嗎？

實現(xiàn)效果

看上去貌似很完美，也有瀑布的樣子。但當拉到頁面底部發(fā)現(xiàn)：

左邊的一大塊都是空的，全部放在了右邊。這顯然不對，因為按照邏輯，左邊更短，應該加在左邊才對。

問題和修正

問題就在于，img的加載是個異步的過程。再看剛才的for循環(huán)：

  // 插入圖片
  function initImg() {
    for (let i = 1; i < 27; i++) {
      let img = new Image();
      img.src = "./pictures/" + i + ".jpg"
      if (left.clientHeight <= right.clientHeight) {
        left.appendChild(img)
      } else {
        right.appendChild(img)
      }
    }
  }

new了Image對象后，指定了其src，然后立刻判斷左右兩邊的高度。這時，img還沒有加載完畢。然而，for循環(huán)不會等待它加載完畢。下一張圖片產(chǎn)生后，立刻也會判斷，但此時上一張圖片還沒有放到頁面上，所以左右的高度很可能就是錯誤的，從而產(chǎn)生了錯誤的判斷。這就出現(xiàn)了上圖中，右列出現(xiàn)了很多很多圖片，而左列空白的樣子。

解決辦法就是，把這個循環(huán)寫成異步的，只有上一張圖片加載完畢后，才去判斷下一張圖片。

很容易想到，使用Promise完成異步判斷。但是對于循環(huán)中的Promise，很難清楚地通過then的變化來推進。于是，我決定采用async和await。

這就需要再封裝一個方法，這個方法返回Promise，在Promise中加載某一張圖片。然后再遍歷所有圖片，使用async/await，依次調用這個方法，就能得到結果了。

而在Promise中，我們在什么時候調用resolve呢？這就需要監(jiān)聽img的onload事件，設置onload事件的回調函數(shù)，在回調函數(shù)中調用resolve即可。

經(jīng)過分析，再次完善代碼：

  // 加載第index張圖片
  function loadIndexImg(index) {
    return new Promise((resolve, reject) => {
      // 當前加載的圖片
      let img = new Image();
      img.src = './pictures/' + index + '.jpg'
      img.onload = () => {
        if (left.clientHeight <= right.clientHeight) {
          left.appendChild(img)
        } else {
          right.appendChild(img)
        }
        resolve();
      }
    })
  }
  // 插入圖片
  async function initImg() {
    // 要在加載完并插入圖片后才去判斷下一張，因此采用async/await
    for (let i = 1; i <= 26; i++) {
      await loadIndexImg(i)
    }
  }
  initImg()

可以看到，在initImg中，依次調用loadIndexImg，并且是異步調用。在圖片加載完成后再去加載下一張圖片，效果應該就可以了。