淺談頁面的瀑布流佈局

時間 2019-11-05

標籤淺談頁面瀑布佈局欄目悠閒生活简体版

原文原文鏈接

瀑布流又稱瀑布流式佈局，是比較流行的一種網站頁面佈局方式。css

視覺表現爲良莠不齊的多欄佈局，最先採用此佈局的是網站是 Pinterest，後逐漸在國內流行。html

瀑布流佈局效果

即多行等寬元素排列，後面的元素依次添加到其後，等寬不等高，根據圖片原比例縮放直至寬度達到咱們的要求，依次按照規則放入指定位置。算法

那麼規則是什麼呢？數組

下面經過圖解來分析一下瀑布流的算法。瀏覽器

圖解瀑布流算法

當第一排排知足夠多的等寬圖片時（以下圖狀況），天然而然的考慮到以後放置的圖片會往下面排放。函數

那麼第六張圖片，放置在什麼位置呢？是下圖的位置麼？佈局

咱們經過瀑布流算法實驗獲得，後面緊跟的第六張圖片的位置應該是這個位置。post

爲何呢？網站

由於放置它以前，這一列的高度爲全部列中最小，因此會放置在這個地方。this

因此咱們知道了，若是再繼續放置下去，第七張圖片應該是這個位置，對嗎？

經過瀑布流算法實驗得出位置正確。

看懂這個圖示應該就能理解了瀑布流的原理算法。

JS 實現代碼

 var colCount   //定義列數
  var colHeightArry= []   //定義列高度數組
  var imgWidth = $('.waterfall img').outerWidth(true)   //單張圖片的寬度

  colCount = parseInt($('.waterfall').width()/imgWidth)   //計算出列數
  for(var i = 0 ; i < colCount; i ++){
    colHeightArry[i] = 0
  }
  //[0,0,0]

  $('.waterfall img').on('load',function(){

    var minValue = colHeightArry[0]  //定義最小的高度
    var minIndex = 0  //定義最小高度的下標
    for(var i = 0 ; i < colCount; i ++){
      if(colHeightArry[i] < minValue){   //若是最小高度組數中的值小於最小值
        minValue = colHeightArry[i]   //那麼認爲最小高度數組中的值是真正的最小值
        minIndex = i  //最小下標爲當前下標
      }
    }

    $(this).css({
      left: minIndex * imgWidth,
      top: minValue
    })
    colHeightArry[minIndex] += $(this).outerHeight(true)
  })


  //當窗口大小重置以後，從新執行
  $(window).on('resize',function(){
    reset()
  })


  //當窗口加載完畢，執行瀑布流
  $(window).on('load',function(){
    reset()
  })

  //定義reset函數
  function reset(){
    var colHeightArry= []
    colCount = parseInt($('.waterfall').width()/imgWidth)
    for(var i = 0 ; i < colCount; i ++){
      colHeightArry[i] = 0
    }
    $('.waterfall img').each(function(){
      var minValue = colHeightArry[0]
      var minIndex = 0
      for(var i = 0 ; i < colCount; i ++){
        if(colHeightArry[i] < minValue){
          minValue = colHeightArry[i]
          minIndex = i
        }
      }

      $(this).css({
        left: minIndex * imgWidth,
        top: minValue
      })
      colHeightArry[minIndex] += $(this).outerHeight(true)
    })
  }