关于瀑布流:js-实现瀑布流排流

成果预览

// 在所需应用瀑布流的页面监听 resize 
window.onresize = function () {waterFall();
};


// 触发计算函数
// perItem 为瀑布流的 每个盒子
function waterFall() {// await  setTimeout(() => {var items = document.getElementsByClassName("perItem");
  // }, 500);
  var gap = 10;
  // 首先确定列数 = 页面的宽度 / 图片的宽度
  var pageWidth = getClient().width;
  var itemWidth = 550;
  var columns = parseInt(pageWidth / (itemWidth + gap));
  var arr = []; // 定义一个数组，用来存储元素的高度
  for (var i = 0; i < items.length; i++) {if (i < columns) {
      // 满足这个条件则阐明在第一行，文章外面有提到
      items[i].style.top = 0;
      items[i].style.left = (itemWidth + gap) * i + "px";
      arr.push(items[i].offsetHeight);
    } else {
      // 其余行，先找出最小高度列，和索引
      // 假如最小高度是第一个元素
      var minHeight = arr[0];
      var index = 0;
      for (var j = 0; j < arr.length; j++) {
        // 找出最小高度
        if (minHeight > arr[j]) {minHeight = arr[j];
          index = j;
        }
      }
      // 设置下一行的第一个盒子的地位
      //top 值就是最小列的高度 +gap
      items[i].style.top = arr[index] + gap + "px";
      items[i].style.left = items[index].offsetLeft + "px";

      // 批改最小列的高度
      // 最小列的高度 = 以后本人的高度 + 拼接过去的高度 + 间隙的高度
      arr[index] = arr[index] + items[i].offsetHeight + gap;
    }
  }
}
function getClient() {
  return {
    width:
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth,
    height:
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight,
  };
}