js瀑布流初始化偏移高度数组

你可以使用JavaScript来初始化瀑布流的偏移高度数组。下面是一个简单的示例代码：

// 假设你有一个包含所有瀑布流元素的数组
var waterfallElements = document.getElementsByClassName('waterfall-element');

// 定义瀑布流列数和列宽
var numColumns = 4;
var columnWidth = 200;

// 初始化偏移高度数组
var offsetHeights = [];

// 遍历每一列，并将初始高度设为0
for (var i = 0; i < numColumns; i++) {
  offsetHeights[i] = 0;
}

// 遍历瀑布流元素，计算每个元素的位置
for (var i = 0; i < waterfallElements.length; i++) {
  // 找到最短列的索引
  var shortestColumnIndex = 0;
  var shortestColumnHeight = offsetHeights[shortestColumnIndex];
  
  for (var j = 1; j < numColumns; j++) {
    if (offsetHeights[j] < shortestColumnHeight) {
      shortestColumnIndex = j;
      shortestColumnHeight = offsetHeights[j];
    }
  }
  
  // 设置当前元素的位置
  waterfallElements[i].style.left = shortestColumnIndex * columnWidth + 'px';
  waterfallElements[i].style.top = shortestColumnHeight + 'px';
  
  // 更新最短列的高度
  offsetHeights[shortestColumnIndex] += waterfallElements[i].offsetHeight;
}

上述代码假设你已经有一个包含所有瀑布流元素的数组 `waterfallElements`，并且设置了瀑布流的列数 `numColumns` 和列宽 `columnWidth`。代码会遍历每个元素，找到当前最短的列，并将元素放置在该列的底部。然后更新该列的高度，以便下一个元素能够正确放置。最后，你可以使用 `offsetHeights` 数组来获取每列的偏移高度。请根据你的实际需求进行适当的调整。