const arr = ["./image/cs1.png", (src = "./image/cs2.png")]; // 获取列数和元素列表 const numCols = 3; const items = document.querySelectorAll(".item"); // 创建列数组，并设置初始高度为0 const cols = new Array(3).fill(10); console.log( cols); // 获取每一列的宽度和间距 const containerWidth = document.querySelector(".container").offsetWidth; const itemWidth = containerWidth / numCols - 20; // 遍历元素列表，将每个元素插入到最短的列中 cols.forEach.call(items, function (item) { // 找到最短的列 const shortestColIndex = cols.indexOf(Math.min.apply(null, cols)); console.log(Math.min.apply(null, cols)); // 设置元素样式 item.style.width = `${itemWidth}px`; item.style.position = "absolute"; item.style.left = `${shortestColIndex * (itemWidth + 20)}px`; item.style.top = `${cols[shortestColIndex]}px`; // 更新列高度 cols[shortestColIndex] += item.offsetHeight + 20; });

这段代码实现了一个瀑布流布局，主要分为以下几个步骤：

1. 定义一个包含图片路径的数组 `arr`。

2. 获取元素列表和列数，这里列数为 `3`。

3. 创建一个长度为 `3` 的数组 `cols`，用于存储每一列的高度，初始值为 `10`。

4. 获取每一列的宽度和间距，这里间距为 `20`。

5. 遍历元素列表，将每个元素插入到最短的列中。

6. 找到最短的列，即 `cols` 数组中值最小的索引，使用 `Math.min.apply(null, cols)` 可以得到 `cols` 数组中的最小值。

7. 设置元素的样式，包括宽度、位置和高度等。

8. 更新 `cols` 数组中最短列的高度，即将该列的高度加上当前元素的高度和间距，以便下次插入元素时可以插入到该列下面。

9. 遍历完所有元素后，就可以得到一个瀑布流布局。