<!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>Document</title> <style> * { margin: 0; padding: 0; } .itemBox { width: 1050px; margin: 0 auto; position: relative; } .item { border: 1px solid #ccc; 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> </body> <script> window.onload = function () { /* 思路分析 1 获取到.itemBox 宽度 2 获取到.item 宽度 3 求出列数 4 求出间距 5 实现瀑布流布局的方法 6 滚动页面时 加载数据 */ // 获取到相关元素 var itemBox = document.getElementsByClassName('itemBox')[0]; var items = document.getElementsByClassName('item'); // 1 获取到.itemBox 宽度 var itemBoxW = itemBox.offsetWidth; // 2 获取到.item 宽度 var itemW = items[0].offsetWidth; // 3 求出列数 var column = parseInt(itemBoxW / itemW); // 4 求出间距 var distence = (itemBoxW - itemW * column) / (column - 1); console.log(distence); // 5 实现瀑布流布局的方法 // 定义一个存储每列高度的容器 var arr = []; waterFull(); // 6 滚动页面时 加载数据 window.onscroll = function () { if (window.pageYOffset + window.innerHeight > getMin(arr).minV) { 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 < items.length; i++) { if (i < column) { items[i].style.left = (itemW + distence) * i + 'px'; arr[i] = items[i].offsetHeight; // console.log(arr); } else { var minV = getMin(arr).minV; var minI = getMin(arr).minI; items[i].style.left = (itemW + distence) * minI + 'px'; items[i].style.top = minV + distence + 'px'; arr[minI] = minV + distence + items[i].offsetHeight; } } } // 获取数组的最小值以及索引 function getMin(arr) { var obj = {}; obj.minV = arr[0]; obj.minI = 0; for (var i = 1; i < arr.length; i++) { if (obj.minV > arr[i]) { obj.minV = arr[i]; obj.minI = i; } } return obj; } } </script> </html>
data数据
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" }
];