瀑布流布局

一、定义

宽度相同，而高度是随机的布局

二、实现方式

1、设置图片宽度一致，高度可以不一致(注：图片样式必须得加上position:absolute，因为js 是靠定位来控制其位置)

2、 初始化一个数组，存储每一列的高度(数组的长度是布局的列数)，并且给每个下标赋值为0

3、 计算出一排的列表个数（容器宽度除以元素宽度）

4、循环每个元素, 循环的内部再循环列数组，判断哪一列元素的高度最小，就将下一个元素放到该列

5、 再判断放入该元素之后所形成的新的整排元素内，哪一列元素最短，再把下一个元素放置该列，以此类推

6、 最后当图片加载完成，所有图片依次放置在最小的列数下面

三、代码实现

var colCount //定义列数
var colHeightArr = [] //存放列的高度数组,该数组的长度为 colCount
var imgWidth = $('.waterfall img').outerWidth(true)//单张图片宽度
        
colCount = Math.floor($('.waterfall').width()/ imgWidth) //获取列数  

for(var i = 0; i<colCount; i++){
  colHeightArr[i] = 0 
}//[0,0,0]

//只有当页面中的图片资源全部加载完毕后，才能读到图片的真实高度
$('.waterfall img').on('load',function(){// 加载之后去处理
   
   var minValue = colHeightArr[0] //定义最小高度
   var minIndex = 0 //定义最小高度的下标
   
   for(var i = 0; i< colCount; i++){ //遍历 从数组找到最小值及下标
     if(colHeightArr[i] < minValue){
        minValue = colHeightArr[i] //真正的最小值是最小高度数组中的值
        minIndex = i //真正的最小值的下标是当前下标
     }
   }
  
  $(this).css({//图片的位置
    top: minValue,
    left: minIndex*imgWidth
  })
  console.log(colHeightArr[minIndex])
  colHeightArr[minIndex] += $(this).outerHeight(true) // 整列的值
})

  //当窗口大小重置之后，重新执行
  $(window).on('resize',function(){
    reset()
  })

  //当窗口加载完毕，执行瀑布流
  $(window).on('load',function(){
    reset()
  })

  //定义reset函数
  function reset(){
    var colHeightArr= []
    colCount = Math.floor($('.waterfall').width()/imgWidth)
    for(var i = 0 ; i < colCount; i++){
      colHeightArr[i] = 0
    }
    $('.waterfall img').each(function(){
      var minValue = colHeightArr[0]
      var minIndex = 0
      for(var i = 0 ; i < colCount; i ++){
        if(colHeightArr[i] < minValue){
          minValue = colHeightArr[i]
          minIndex = i
        }
      }

      $(this).css({//图片的位置
         top: minValue,
         left: minIndex*imgWidth
      })
      colHeightArr[minIndex] += $(this).outerHeight(true)
    })
  }

demo 地址 http://js.jirengu.com/zuxeh