<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } .itemBox { width: 1050px; position: relative; margin: 0px auto; } .item { /* 192px; */ border: 1px solid lightgrey; padding: 4px; position: absolute; } </style> </head> <body> <div class='itemBox'> <div class='item'> <img src="images/P_000.jpg" alt=""> </div> <div class='item'> <img src="images/P_001.jpg" alt=""> </div> <div class='item'> <img src="images/P_002.jpg" alt=""> </div> <div class='item'> <img src="images/P_003.jpg" alt=""> </div> <div class='item'> <img src="images/P_004.jpg" alt=""> </div> <div class='item'> <img src="images/P_005.jpg" alt=""> </div> <div class='item'> <img src="images/P_006.jpg" alt=""> </div> <div class='item'> <img src="images/P_007.jpg" alt=""> </div> <div class='item'> <img src="images/P_008.jpg" alt=""> </div> <div class='item'> <img src="images/P_009.jpg" alt=""> </div> <div class="item"> <img src="./images/P_000.jpg" alt=""> </div> <div class="item"> <img src="./images/P_001.jpg" alt=""> </div> <div class="item"> <img src="./images/P_002.jpg" alt=""> </div> <div class="item"> <img src="./images/P_003.jpg" alt=""> </div> <div class="item"> <img src="./images/P_004.jpg" alt=""> </div> <div class="item"> <img src="./images/P_005.jpg" alt=""> </div> <div class="item"> <img src="./images/P_006.jpg" alt=""> </div> <div class="item"> <img src="./images/P_007.jpg" alt=""> </div> <div class="item"> <img src="./images/P_008.jpg" alt=""> </div> <div class="item"> <img src="./images/P_009.jpg" alt=""> </div> </div> <script> window.onload = function() { var itemBox = document.getElementsByClassName('itemBox')[0]; var item = document.getElementsByClassName('item'); var itemBoxW = itemBox.offsetWidth; var itemW = item[0].offsetWidth; var column = parseInt(itemBoxW/itemW); var distance = (itemBoxW - itemW*column)/(column - 1); var arr = []; waterFull(); console.log('dsjfldf'); window.onscroll = function () { console.log('dsjfldf'); if(window.innerHeight + window.pageYOffset > getMin(arr).minV) { console.log('dsjfldf'); var json = [ { "src": "./images/P_000.jpg" }, { "src": "./images/P_001.jpg" }, { "src": "./images/P_002.jpg" }, { "src": "./images/P_003.jpg" }, { "src": "./images/P_004.jpg" }, { "src": "./images/P_005.jpg" }, { "src": "./images/P_006.jpg" }, { "src": "./images/P_007.jpg" }, { "src": "./images/P_008.jpg" }, { "src": "./images/P_009.jpg" }, { "src": "./images/P_010.jpg" } ]; for(var i = 0;i < json.length;i++) { var div = document.createElement('div'); div.className = 'item'; var img = document.createElement('img'); img.src = json[i].src; div.appendChild(img); itemBox.appendChild(div); } waterFull(); } } function waterFull() { for(var i = 0;i < item.length;i++) { if(i<column) { arr[i] = item[i].offsetHeight; item[i].style.left = (distance + itemW)*i + 'px'; item[i].style.top = 0; } else { var minI = getMin(arr).minI; var minV = getMin(arr).minV; item[i].style.left = minI * (distance + itemW) + 'px'; item[i].style.top = arr[minI] + distance + 'px'; arr[minI] = arr[minI] + distance + item[i].offsetHeight; } } } function getMin(arr) { var o = {}; o.minI = 0; o.minV = arr[0]; for(var i = 1;i<arr.length;i++) { if(arr[i] < o.minV) { o.minI = i; o.minV = arr[i]; } } return o; } } </script> </body> </html>
运行结果：
我觉得我应该不会忘记 当页面有图片 需要加载完再做处理时 应该吧要写的script代码放在 window.omload = function() {} 里面 微笑.jpg；
还有就是window.onscroll = function() {} 起作用的前提是页面中的内容足够长，可以在浏览器的窗口显示滚动条才行 微笑*2;