瀑布流又稱瀑布流式布局伴榔，是比較流行的一種網(wǎng)站頁面布局方式。視覺表現(xiàn)為參差不齊的多欄布局庄萎，最早采用此布局的是網(wǎng)站是 Pinterest踪少，后逐漸在國內(nèi)流行。

瀑布流布局效果

在這里插入圖片描述

即多行等寬元素排列糠涛，后面的元素依次添加到其后援奢，等寬不等高，根據(jù)圖片原比例縮放直至寬度達到我們的要求忍捡，依次按照規(guī)則放入指定位置集漾。
那么規(guī)則是什么呢？
下面通過圖解來分析一下瀑布流的算法砸脊。

圖解瀑布流算法

當?shù)谝慌排艥M足夠多的等寬圖片時（如下圖情況）具篇，自然而然的考慮到之后放置的圖片會往下面排放。

在這里插入圖片描述

那么第六張圖片凌埂，放置在什么位置呢驱显？是下圖的位置么？

在這里插入圖片描述

在這里插入圖片描述

為什么呢伏恐？
因為放置它之前，這一列的高度為所有列中最小栓霜，所以會放置在這個地方翠桦。
所以我們知道了，如果再繼續(xù)放置下去胳蛮，第七張圖片應該是這個位置秤掌，對嗎？

在這里插入圖片描述

通過瀑布流算法實驗得出位置正確鹰霍。看懂這個圖示應該就能理解了瀑布流的原理算法茵乱。

在這里插入圖片描述

JS 實現(xiàn)代碼

這里使用了jQuery

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>

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

  colCount = parseInt($('.waterfall').width()/imgWidth)   //計算出列數(shù)
  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){   //如果最小高度組數(shù)中的值小于最小值
        minValue = colHeightArry[i]   //那么認為最小高度數(shù)組中的值是真正的最小值
        minIndex = i  //最小下標為當前下標
      }
    }

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


  //當窗口大小重置之后茂洒，重新執(zhí)行
  $(window).on('resize',function(){
    reset()
  })


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

  //定義reset函數(shù)
  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)
    })
  }

</script>

Demo 演示

瀑布流 Demo 效果

總結(jié)瀑布流布局原理

設置圖片寬度一致

• 根據(jù)瀏覽器寬度以及每列寬度計算出列表個數(shù)瓶竭，列表默認0
• 當圖片加載完成督勺，所有圖片依次放置在最小的列數(shù)下面
• 父容器高度取列表數(shù)組的最大值

引用鏈接

http://www.reibang.com/p/cea62b6868ce