``` <style> * { margin: 0; padding: 0; } #container { margin-left: auto; margin-right: auto; /* overflow: hidden; */ position: relative; } img { width: 230px; padding: 5px; } .content { box-shadow: 0 0 1px 1px rgba(51, 51, 51, 0.1); float: left; position: relative; width: 240px; } </style> ``` ``` <div id="container"> <div class="content"> <img src="images/01.jpg" alt=""> </div> <div class="content"> <img src="images/02.jpg" alt=""> </div> <div class="content"> <img src="images/03.jpg" alt=""> </div> <div class="content"> <img src="images/04.jpg" alt=""> </div> <div class="content"> <img src="images/05.jpg" alt=""> </div> <div class="content"> <img src="images/06.jpg" alt=""> </div> <div class="content"> <img src="images/07.jpg" alt=""> </div> <div class="content"> <img src="images/08.jpg" alt=""> </div> <div class="content"> <img src="images/09.jpg" alt=""> </div> <div class="content"> <img src="images/10.jpg" alt=""> </div> <div class="content"> <img src="images/11.jpg" alt=""> </div> <div class="content"> <img src="images/12.jpg" alt=""> </div> <div class="content"> <img src="images/07.jpg" alt=""> </div> <div class="content"> <img src="images/08.jpg" alt=""> </div> <div class="content"> <img src="images/09.jpg" alt=""> </div> <div class="content"> <img src="images/10.jpg" alt=""> </div> <div class="content"> <img src="images/11.jpg" alt=""> </div> <div class="content"> <img src="images/12.jpg" alt=""> </div> </div> ``` ``` window.onload = function () { var url = { dataUrl: [{ src: "01.jpg" }, { src: "02.jpg" }, { src: "03.jpg" }, { src: "04.jpg" }, { src: "05.jpg" }, { src: "06.jpg" }, { src: "07.jpg" }, { src: "08.jpg" }, { src: "09.jpg" }, { src: "10.jpg" }, { src: "11.jpg" }, { src: "12.jpg" }] } var container = document.getElementById("container"); var contents = document.getElementsByClassName("content"); var data = url.dataUrl; place_img(); window.onscroll = function(){ if(sCondition()){ for(let i = 0 ;i <data.length;i++){ let img = document.createElement("img"); img.src = "images/" + data[i].src; let div = document.createElement("div"); div.className = "content"; div.append(img); container.append(div); place_img(); } } } function sCondition(){ var sh = document.documentElement.scrollTop; var vh = document.documentElement.clientHeight; var offsetTop = contents[contents.length-1].offsetTop+contents[contents.length-1].offsetHeight/2 return sh+vh>offsetTop?true:false; } function place_img() { var ww = window.innerWidth; var cw = contents[0].offsetWidth; //一排放置幾張圖片 var num = Math.floor(ww / cw); container.style.width = num * cw + "px"; // 2. 將第一排的height放入一個數組 var content_arr = Array.prototype.slice.call(contents); var arr_height = []; content_arr.forEach((element, index) => { if (index < num) { arr_height.push(element.offsetHeight) } else { //3.剩余圖片放置的位置 //絕對定位， top = 數組中最小高度 ，left 為最小位置的 offsetLeft； var minHeight = Math.min(...arr_height); var minIndex = arr_height.indexOf(minHeight); var offsetLeft = content_arr[minIndex].offsetLeft; console.log(offsetLeft); content_arr[index].style.position = "absolute"; content_arr[index].style.top = minHeight + "px"; content_arr[index].style.left = offsetLeft + "px"; // //4.數組高度改變，重新設置數組 arr_height[minIndex] += content_arr[index].offsetHeight; } }) } } ```