思路

1. 页面布局为：图片容器盒子相对定位，其中的所有图片绝对定位
2. 定义一个布局函数，在页面加载时以及窗口大小发生变化时调用该函数
3. 列数为：图片外层盒子宽度/图片实际所占宽度(图片宽度+边框+内外边距)
4. 每列的高度存放在一个数组中，数组的长度即为列数
5. 遍历所有图片集合，给每一张图片定位
6. 找出数组中最小值对应的索引，即为高度最小的列
7. 该图片的left值设为：高度最小的列数*图片实际所占宽度
8. 该图片的top设为：高度最小的列的高度
9. 该图片定位完毕后，将该图片的实际所占高度添加到之前高度最小的列中

代码实现

• 布局实现

  <!--布局相对很简单，图片容器设为相对定位，所有图片放在容器中，设为绝对定位-->
  <div class="waterfall">
    <img src="ava01.jpg" alt="">
    <img src="bg01.jpg" alt="">
    <img src="bg02.jpg" alt="">
    <img src="bg03.jpg" alt="">
    <img src="bg04.jpg" alt="">
    <img src="bg04.jpg" alt="">
    .......
  </div>

• 功能实现

  // 当页面加载或窗口大小改变，调用设置布局函数
  $(window).load(setLayOut);
  $(window).resize(setLayOut);
  // 定义设置瀑布流布局方法，当页面加载或窗口大小改变时调用该方法
  function setLayOut() {
    // 获取列数
    var cols = parseInt($('.waterfall').width() / $('img').outerWidth(true));
    // 定义存放每一列的高度的数组
    var colsHeight = [];
    // 根据列数初始化每一列高度为0
    for (var i = 0; i < cols; i++) {
        colsHeight[i] = 0;
    }
    // 设置每张图片的位置
    $('img').each(function () {
        // 计算高度最小的列数和高度
        var minHeight = colsHeight[0];
        var min = 0;
        for (var i = 1; i < colsHeight.length; i++) {
            if (colsHeight[i] < minHeight) {
                minHeight = colsHeight[i];
                min = i;
            }
        }
        // 为图片设置样式
        $(this).css({
            top: minHeight,
            left: min * $('img').outerWidth(true)
        });
        // 为当前列增加高度
        colsHeight[min] += $(this).outerHeight(true);
    })
  }

效果