js实现瀑布流布局

1、定义style样式

* {
  margin: 0;
  padding: 0;
}

#container {
  width: 90%;
  margin: 0 auto;
  border: 2px solid;
  position: relative;
}

#container img {
  position: absolute;
  transition: .5s;
  width: 220px;
}

2、js

// 1.获取容器
  var divContainer = document.getElementById('container')
  // 2.定义图片宽度
  var imgWidth = 220
  // 3.初始化，创建图片并加入到容器中
  function createImgs() {
    for (var i = 0; i <= 10; i++) {
      var src = 'img/' + i + '.jpg'
      var img = document.createElement('img')
      img.onload = XPathExpression
      img.src = src
      divContainer.appendChild(img)
    }
  }
  // 4.根据容器宽度计算当前当前可用列数与间隙
  function computeColumns() {
    var containerWidth = divContainer.clientWidth
    // 计算列数
    var columns = containerWidth / imgWidth
    // 计算间隙数量
    var spaceNumber = columns + 1
    // 计算剩余空间
    var leaveSpace = containerWidth - (columns * imgWidth)
    // 计算各空间间隙大小
    var space = leaveSpace / spaceNumber
    return {
      space,
      columns
    }
  }