代码附上：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>fall_out</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } </style> </head> <body> <ul></ul> <script> var ul, img; // 创建容器 const count = 5;//总列数 var arr = [];//存放高度之后用来比较 var pic = 1;//图片索引 init();//入口函数 function init() { ul = document.querySelector("ul");//获取ul for (var i = 0; i < count; i++) {//根据count创建li var li = document.createElement("li"); ul.appendChild(li); //设置样式 li.style.margin = "5px"; li.style.width = (document.documentElement.clientWidth) / count - 22 + "px"; li.style.border = "1px solid lightcoral"; li.style.float = "left"; arr.push(0);//初始化第一排图片的高 } //新建第一张图片 img = new Image(); img.src = "img/" + pic + ".jpg"; img.addEventListener("load", addPic);//添加加载事件 document.addEventListener("scroll", move);//给右侧滚轮添加滚轮事件 } function addPic(e) { // 复制第一张图片 var copy = this.cloneNode(false); var min = Math.min.apply(null, arr); var index = arr.indexOf(min);//寻找高度最小的图片 ul.children[index].appendChild(copy);//将图片加载到ul的高度最小的li中 copy.style.width = "100%"; arr[index] = copy.parentElement.offsetHeight;//将高度添加到数组的该项 if ((document.documentElement.scrollHeight - document.documentElement.scrollTop) / document.documentElement .clientHeight > 4) {//当右边滚轮到达屏幕高度四倍时跳出函数 return; } pic = parseInt(Math.random() * 10 + 1);//否则继续加载图片 img.src = "img/" + pic + ".jpg"; } function move(e) {//当文档高度减滚动条的位置小于屏幕两倍时，继续加载 if ((document.documentElement.scrollHeight - document.documentElement.scrollTop) / document.documentElement .clientHeight < 2) { pic = parseInt(Math.random() * 10 + 1); img.src = "img/" + pic + ".jpg"; } } </script> </body> </html>
