说明

源代码

1. 瀑布流

出现问题: 设计给的图片不是同一个尺寸大小,因此不能规则的放入到给定的DOM结构中.此时,需要使用瀑布流技术来解决这个问题
解决的思路: 让图片等宽、不等高
核心: 用到了定位

img {
    position: absolute;
    left: 最小的索引 * 图片的宽度;
    top: 最小的图片的高度;
}

算法如下:

首先获取浏览器的宽度w,用w除以图片盒子的宽度向下取整记为列数: col
利用数组,保存每一列当前的高度
如果是第一行,则将图片的高度保存在数组arr中
如果不是第一行,取出arr中的最小值和索引,计算出绝对定位的位置.并给图片设置绝对定位

1.1 用到的API

1.1.1 获取当前屏幕的宽度

由于每个图片盒子还有对应的高度,因此获取的时候,还要获取内边距.
在jquery中,可以通过$().outerWidth实现

var screenWidth = $(window).outerWidth()

1.1.2 给DOM元素加css样式

$().css({
    position: 'absolute',
    left: currLeft,
    top: currTop
})

1.1.3 总体代码

总体代码如下:

$(function() {
  waterFall()
})
function waterFall() {
  // 获取盒子
  var box = $('.box')
  // 1. 求出对应得列数
  // 1.1 得到当前屏幕的宽度
  var screenWidth = $(window).outerWidth()
  // 1.2 获取每张图片的宽度
  var boxWidth = $('.box').outerWidth()
  // 1.3 获取当前的列数
  var col = Math.floor(screenWidth / boxWidth)
  // 2. 创建数组,记录当前列数的高度
  var arr = []
  for (var i = 0; i < col; i++) {
    arr.push(0)
  }
  // 3. 遍历盒子中的图片
  $.each(box, function(index, value) {
    // 得到每一张图片的高度
    var thisHeight = $(this).height()
    if (index < col) {
      // 如果是第一行将高度的存入数组中.
      arr[index] = thisHeight
    } else {
      // 如果不是第一行,找到数组中最小的高度和索引
      var currMinHeight = Math.min.apply(arr, arr)
      var currMinIndex = arr.indexOf(currMinHeight)
      // 算出距离 左侧/上侧 的距离
      var currLeft = currMinIndex * boxWidth
      var currTop = currMinHeight
      // 将当前的图片变为绝对定位,放在盒子中
      $(this).css({
        position: 'absolute',
        left: currLeft,
        top: currTop
      })
      arr[currMinIndex] = currMinHeight + thisHeight
    }
  })
}