纯js实现瀑布流布局

目录结构：

只需要在img里面放入图片就ok

html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .container {
        width: 90%;
        margin: 0 auto;
        /* border: 2px solid; */
        position: relative;
      }

      .container img {
        position: absolute;
        /* css3属性，表示过渡效果， 图片的样式变化在0.3秒内完成，而不是瞬间完成 */
        transition: 0.3s;
        width: 220px;
      }
    </style>
  </head>

  <body>
    <div id="container" class="container"></div>
    <script src="./index.js"></script>
  </body>
</html>

js代码：

var divContainer = document.getElementById('container');
var imgWidth = 220; //每张图片的固定宽度

//1. 加入图片元素
function createImgs() {
  for (var i = 0; i <= 40; i++) {
    var src = 'img/' + i + '.jpg'; //生成图片的src路径
    var img = document.createElement('img');
    img.onload = setPoisions;
    img.src = src; //设置src路径
    divContainer.appendChild(img); //添加到容器中
  }
}

createImgs();

// 2. 设置每张图片的位置

function setPoisions() {
  /**
   * 计算一共有多少列，以及每一列之间的间隙
   */
  function cal() {
    var containerWidth = divContainer.clientWidth; //容器的宽度
    //计算列的数量
    var columns = Math.floor(containerWidth / imgWidth);
    //计算间隙
    var spaceNumber = columns + 1; //间隙数量
    var leftSpace = containerWidth - columns * imgWidth; //计算剩余的空间
    var space = leftSpace / spaceNumber; //每个间隙的空间
    return {
      space: space,
      columns: columns,
    };
  }
  var info = cal(); //得到列数，和 间隙的空间
  var nextTops = new Array(info.columns); //该数组的长度为列数，每一项表示该列的下一个图片的纵坐标
  nextTops.fill(0); //将数组的每一项填充为0
  for (var i = 0; i < divContainer.children.length; i++) {
    var img = divContainer.children[i];
    //找到nextTops中的最小值作为当前图片的纵坐标
    var minTop = Math.min.apply(null, nextTops);
    img.style.top = minTop + 'px';
    //重新设置数组这一项的下一个top值
    var index = nextTops.indexOf(minTop); //得到使用的是第几列的top值
    nextTops[index] += img.height + info.space;
    //横坐标
    var left = (index + 1) * info.space + index * imgWidth;
    img.style.left = left + 'px';
  }
  var max = Math.max.apply(null, nextTops); //求最大值
  divContainer.style.height = max + 'px'; //3. 设置容器的高度
}

var timerId = null; //一个计时器的id
window.onresize = function () {
  //窗口尺寸变动后，重新排列
  if (timerId) {
    clearTimeout(timerId);
  }
  timerId = setTimeout(setPoisions, 300);
};

下载地址：https://download.csdn.net/download/m0_57033755/88664684

纯js实现瀑布流布局

猜你喜欢