waterfall

每张图片的宽度固定，高度不固定，在加载的过程中，我们可以按需求对图片进行布局，比如计算好要有排布几列，按每列图片高度总和最小的列先摆放图片

实现原理：

• 写好图片的样式，display: absolute;
• 计算出总共有多少列图片（colCount）
• 定义一个数组，用于存放每一列的高度（每列中图片的高度总和），并且初始化数组（每项为0）
• 图片到来之后，判断出高度最小的列 获得其高度（colSumHeight），并且得到其数组下标（minIdx），通过这两个值，设置 css 放置图片的位置

test-1

var colCount  //总共有多少列
var colHeightArray = []  //定义一个数组，存储列的高度（即，这一列图片高度的总和）
var imgWidth = $('.waterfall img').outerWidth(true)  //获取图片的宽度

colCount = Math.floor($('.waterfall').width() / imgWidth)  //计算总共有几列
console.log(colCount)

for (var i = 0; i < colCount; i++){  //初始化数组
  colHeightArray[i] = 0
}
console.log(colHeightArray)  //比如说有三列，则数组为 [0, 0, 0]

$('.waterfall img').on('load', function(){  //哪个图片先加载完成，先执行
  var minValue = colHeightArray[0]  //初始化最小高度，为数组的第一个值
  var minIndex = 0  //初始化高度最小的列，数组下标为 0
  for (var i = 0; i < colCount; i++){
    if ( colHeightArray[i] < minValue){
      minValue = colHeightArray[i]  //通过一个 for 循环，if 判断得出最小高度
      minIndex = i  //得到高度最小的列，数组下标
    }
  }
  $(this).css({  //css 设置该图片的位置
    left: minIndex * imgWidth,
    top: minValue
  })
  colHeightArray[minIndex] += $(this).outerHeight(true)  //把每列图片高度的总高度存入数组
  
})

布局用 绝对定位（position: absolute）
算法：列高度最小的优先排列
http://js.jirengu.com/jineh/1/edit?js,output

$(window).on('resize', function(){  //窗口变化后，执行
  
  colCount = Math.floor($('.waterfall').width() / imgWidth)  //重新计算列的数目
  
  for (var i = 0; i < colCount; i++){  //重新初始化数组
  colHeightArray[i] = 0
  }

  $('.waterfall img').each(function(){  //这时候 img 都已经加载好了，直接遍历就可以了，然后把刚才的代码再执行一遍就可以了
    var minValue = colHeightArray[0]  
    var minIndex = 0 
    for (var i = 0; i < colCount; i++){
      if ( colHeightArray[i] < minValue){
        minValue = colHeightArray[i]  
        minIndex = i  
      }
    }
    $(this).css({ 
      left: minIndex * imgWidth,
      top: minValue
    })
    colHeightArray[minIndex] += $(this).outerHeight(true) 
  })
  
})

加入这个事件后，窗口大小变化后，重新布局瀑布流
http://js.jirengu.com/jineh/4/edit?js,output

var waterfall = {
  init: function(){
    
    this.colHeightArray = []
    this.imgWidth = $('.waterfall img').outerWidth(true)
    this.colCount = Math.floor($('.waterfall').width() / this.imgWidth)
    
    for (var i=0; i < this.colCount; i++){
      this.colHeightArray[i] = 0
    }
    
    this.bind()
  },
  
  bind: function(){
    var _this = this
    $('.waterfall img').on('load', function(){
      _this.layout($(this))
    })
    
    $(window).on('resize', function(){
      $('.waterfall img').each(function(){
        _this.layout($(this))
      })
    })
  },
  
  layout: function($node){
    console.log(this)
    
    var minValue = this.colHeightArray[0]
    var minIndex = 0
    console.log(minValue, minIndex)
    
    for (var i=0; i < this.colCount; i++){
      if(this.colHeightArray[i] < minValue){
        minValue = this.colHeightArray[i]
        minIndex = i
      }
    }
    console.log(minValue, minIndex)
    
    $node.css({
      left: minIndex * this.imgWidth,
      top: minValue
    })
    
    this.colHeightArray[minIndex] += $node.outerHeight(true)
  }
}

waterfall.init()

让代码更具可读性
http://js.jirengu.com/jineh/5/edit?js,output

waterfall-demo-events

设置图片的基础样式

使用瀑布流排列

木桶布局

https://zhuanlan.zhihu.com/p/28466291