1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .box { 13 float: left; 14 border: 1px solid #ccc; 15 padding: 5px; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="container" id="container"> 21 <div class="box"><img src="images/P_000.jpg" alt=""/></div> 22 <div class="box"><img src="images/P_001.jpg" alt=""/></div> 23 <div class="box"><img src="images/P_002.jpg" alt=""/></div> 24 <div class="box"><img src="images/P_003.jpg" alt=""/></div> 25 <div class="box"><img src="images/P_004.jpg" alt=""/></div> 26 <div class="box"><img src="images/P_005.jpg" alt=""/></div> 27 <div class="box"><img src="images/P_006.jpg" alt=""/></div> 28 <div class="box"><img src="images/P_007.jpg" alt=""/></div> 29 <div class="box"><img src="images/P_008.jpg" alt=""/></div> 30 <div class="box"><img src="images/P_009.jpg" alt=""/></div> 31 <div class="box"><img src="images/P_010.jpg" alt=""/></div> 32 <div class="box"><img src="images/P_011.jpg" alt=""/></div> 33 <div class="box"><img src="images/P_012.jpg" alt=""/></div> 34 <div class="box"><img src="images/P_013.jpg" alt=""/></div> 35 <div class="box"><img src="images/P_014.jpg" alt=""/></div> 36 <div class="box"><img src="images/P_015.jpg" alt=""/></div> 37 <div class="box"><img src="images/P_016.jpg" alt=""/></div> 38 <div class="box"><img src="images/P_017.jpg" alt=""/></div> 39 <div class="box"><img src="images/P_018.jpg" alt=""/></div> 40 <div class="box"><img src="images/P_019.jpg" alt=""/></div> 41 </div> 42 </body> 43 </html> 44 <script> 45 window.onload = function () { 46 var container = document.getElementById("container"); 47 var boxs = container.children; 48 var pageWidth = window.innerWidth; 49 var boxWidth = boxs[0].offsetWidth; 50 var column = Math.floor(pageWidth / boxWidth); 51 var arrHeight = []; 52 function waterfall() { 53 for (var i = 0; i < boxs.length; i++) { 54 if (i < column) { 55 arrHeight[i] = boxs[i].offsetHeight; 56 } else { 57 var minHeight = getMin(arrHeight).value; 58 var minHeightIndex = getMin(arrHeight).index; 59 boxs[i].style.position = "absolute"; 60 boxs[i].style.left = boxs[minHeightIndex].offsetLeft + "px"; 61 boxs[i].style.top = minHeight + "px"; 62 arrHeight[minHeightIndex] = minHeight + boxs[i].offsetHeight; 63 } 64 } 65 } 66 waterfall(); 67 function bottomed() { 68 var scrollTop = window.pageYOffset; 69 var clientHeight = window.innerHeight; 70 var lastBoxTop = boxs[boxs.length - 1].offsetTop; 71 if ((scrollTop + clientHeight) > lastBoxTop) { 72 return true; 73 } 74 } 75 window.onscroll = function () { 76 if (bottomed()) { 77 var json = [ 78 {"src": "images/P_000.jpg"}, 79 {"src": "images/P_001.jpg"}, 80 {"src": "images/P_002.jpg"}, 81 {"src": "images/P_003.jpg"}, 82 {"src": "images/P_004.jpg"}, 83 {"src": "images/P_005.jpg"}, 84 {"src": "images/P_006.jpg"}, 85 {"src": "images/P_007.jpg"}, 86 {"src": "images/P_008.jpg"}, 87 {"src": "images/P_009.jpg"}, 88 ] 89 for (var i = 0; i < json.length; i++) { 90 var div = document.createElement("div"); 91 div.className = "box"; 92 var img = document.createElement("img"); 93 img.src = json[i].src; 94 div.appendChild(img); 95 container.appendChild(div); 96 } 97 waterfall(); 98 } 99 } 100 } 101 102 function getMin(arr) { 103 var min = {}; 104 min.index = 0; 105 min.value = arr[min.index]; 106 for (var i = 0; i < arr.length; i++) { 107 if (arr[i] < min.value) { 108 min.value = arr[i]; 109 min.index = i; 110 } 111 } 112 return min; 113 } 114 115 116 </script>