js实现瀑布流循环播放

瀑布流循环播放是一种常见的前端效果，可以用JavaScript实现。下面是一个简单的实现步骤：

1. 获取瀑布流容器和瀑布流元素列表。
2. 获取每个元素的高度，并记录下它们的位置。
3. 设置一个变量，表示当前需要插入元素的位置。
4. 循环插入元素，直到所有元素都被插入为止，每次插入时，选择高度最短的列插入，然后更新该列的高度。
5. 当所有元素都被插入后，根据容器的高度和滚动位置，决定是否需要继续循环播放。

以下是一个简单的示例代码：

// 获取瀑布流容器和瀑布流元素列表
var container = document.getElementById("waterfall");
var items = container.querySelectorAll(".item");

// 记录每个元素的位置和高度
var heights = [];
for (var i = 0; i < items.length; i++) {
  var item = items[i];
  var height = item.offsetHeight;
  heights.push(height);
  item.style.top = "0px"; // 初始时都在顶部
  item.style.left = i * item.offsetWidth + "px"; // 设置初始位置
}

// 当前需要插入元素的位置
var currentIndex = 0;

// 插入元素
function insertItem() {
  if (currentIndex >= items.length) {
    // 所有元素都被插入，根据需要进行循环播放或停止
    if (container.scrollHeight - container.scrollTop <= container.clientHeight) {
      container.scrollTop = 0; // 滚动到顶部，开始循环播放
      currentIndex = 0;
    } else {
      return; // 还未滚动到底部，继续等待
    }
  }

  // 找到高度最短的列
  var minIndex = 0;
  for (var i = 1; i < heights.length; i++) {
    if (heights[i] < heights[minIndex]) {
      minIndex = i;
    }
  }

  // 插入元素，并更新列的高度
  var item = items[currentIndex++];
  container.appendChild(item);
  item.style.top = heights[minIndex] + "px";
  item.style.left = minIndex * item.offsetWidth + "px";
  heights[minIndex] += item.offsetHeight;
}

// 每隔一段时间插入一个元素
var interval = setInterval(insertItem, 1000);

这是一个简单的示例代码，可以根据具体需求进行修改和扩展。