<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } li { list-style: none; } #box { margin: 0 auto; width: 700px; } ul { width: 200px; float: left; margin: 0 auto; margin-right: 10px; } img { width: 200px; padding-top: 10px; } </style> </head> <body> <div id="box"> <ul></ul> <ul></ul> <ul></ul> </div> <script src="./js/1.ajax.js"></script> <script> window.onload = function() { let oBox = document.getElementById("box"); let oUl = document.getElementsByTagName("ul"); let vH = document.documentElement.clientHeight; // 可视高度 // 最小高度的列 function min_height(oUl) { let ht = oUl[0].offsetHeight; // 第一张图片的高度 let index = 0; for (let i = 0; i < oUl.length; i++) { if (oUl[i].offsetHeight < ht) { // 第一张图片和其他图片比较 ht = oUl[i].offsetHeight; // 获取最小的图片高度 index = i; // 获取最小高度的图片的索引 } } return index; } //加载图片 function loadingImg() { ajax("./index.json", function(data) { // 读取本地 json 下的图片地址 data = (new Function("return" + data))(); // 将 string 类型的 data 转换成 数组 // 等价于 data = JSON.parse(data); for (let i = 0; i < data.length; i++) { let oLi = document.createElement("li"); let oImg = document.createElement("img"); // 新建图片 oImg.src = data[i]; oLi.appendChild(oImg); oUl[min_height(oUl)].append(oLi); // 将图片添加到最小的那一列 } }) } loadingImg(); document.onscroll = function() { // 滚动加载图片 let sH = document.documentElement.scrollTop || document.body.scrollTop; // 滚动高度 if (sH + vH >= document.body.scrollHeight * 0.8) { // 文档的实际高度 * 0.8解决滚动时图片空白的问题 loadingImg(); } } } </script> </body> </html>
原文：https://www.cnblogs.com/brotheryang/p/13832069.html