关于瀑布流: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,  };}