js瀑布流

代码：https://gitee.com/huiyani/js20/tree/master/12.waterfall

编写结构

浮动布局显示

注意：确定每张图片设置等宽

js编写

1、定义一些变量

// container盒子
let oParent = document.getElementById("container");
// 所有图片外层box
let boxArr = oParent.querySelectorAll("#container > .box");
// 初始为第一行图片的offsetHeight数组
let heightArr = [];
// 图片宽度，定宽
let imgWidth = 0;

2、瀑布流算法

分析：

• 当前视口宽度/图片宽度，得到一行显示图片张数，再计算（图片张数*图片宽度）父容器宽度，此时容器的margin 0 auto可以使容器在浏览器视口居中。
• 通过定位设置图片位置，第一行图片不用定位，将第一行图片高度放在heightArr数组中，拿到数组中最小高度的索引，即确定了此最小高度图片的位置，将后面图片定位在此图片下面。

// 布局
function imgLocation() {
  // 一张图片宽度
  imgWidth = boxArr[0].offsetWidth;
  // 当前视口/图片宽度 = 一排显示图片列数。
  var num = Math.floor(document.documentElement.clientWidth / imgWidth);
  // 动态计算父级的宽度以居中(一张图片时父级容器width也是一张图片的宽度)
  oParent.style.cssText = `width: ${imgWidth * num}px`;
  // 计算图片的高度
  heightArr = [];
  boxArr.forEach((v, i) => {
    // 计算当前每列高度
    if (i < num) {
      heightArr.push(v.offsetHeight);
      // 超出列数的序列号，进行内容归位
    } else {
      appendImg(v);
    }
  });
  // console.log(heightArr);
}

3、第一行图片之后的图片定位

// 图片归位
function appendImg(ele) {
  // 获取最小高度
  let minHeight = Math.min(...heightArr);
  // 最小高度的索引
  let index = heightArr.indexOf(minHeight);
  // 数组最小高度再加上当前ele的高度，后面如果有图片就定位在ele下面
  heightArr[index] = minHeight + ele.offsetHeight;
  // 定位
  ele.style.position = "absolute";
  ele.style.top = minHeight + "px";
  // v.style.left = boxArr[index].offsetLeft + "px";
  ele.style.left = index * imgWidth + "px";
}

4、调用

// 因为图片是异步加载，必须等所有资源加载完毕再执行，否则可能获取不到图片信息，如高度
window.addEventListener("load", imgLocation);

上拉加载

// 模拟加载图片
window.addEventListener("scroll", function () {
  let {
    clientHeight,
    scrollHeight,
    scrollTop,
  } = document.documentElement;
  if (scrollTop + clientHeight > scrollHeight - 10) {
    // 模拟加载
    let old = oParent.innerHTML;
    // console.log(old);
    oParent.innerHTML =
      old +
      `<div class="box">
        <div class="box-img">
          <img src="images/8.jpg" alt="" />
        </div>
      </div>`;
    appendImg(document.querySelector(".box:last-child"));
  }
});