瀑布流 · Javascript

``` <style> *{ margin: 0; padding: 0; } img{ width: 230px; padding: 5px; vertical-align: bottom; } .content{ width: 240px; border: 1px solid #eee; /* box-shadow: 0 0 1px 1px #ccc; */ float: left; position: relative; } #container{ position: relative; margin-right: auto; margin-left: auto; } </style> </head> <body> <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> <script> 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" }] } window.onload = function(){ //確保內容加載完畢否則無法獲取高度 var container = document.getElementById("container"); var contents = document.getElementsByClassName("content"); var data = url.dataUrl; palceImg(); function palceImg(){ var ww = window .innerWidth; var cw = contents[0].offsetWidth; var num = Math.floor(ww/cw); container.style.width = num*cw+"px"; //取到圖片整張數 var content_arr = Array.prototype.slice.call(contents); //將contents變更為數組 var arr_height = []; content_arr.forEach(function(element,index){ if(index<num){ arr_height.push(element.offsetHeight); //也可將element替換成content_arr[index] } else{ var minHeight = Math.min(...arr_height); console.log(minHeight); var minIndex = arr_height.indexOf(minHeight); console.log(minIndex); var offsetLeft = content_arr[minIndex].offsetLeft; element.style.position = "absolute"; element.style.top = minHeight+"px"; element.style.left = offsetLeft+"px"; arr_height[minIndex]+=content_arr[index].offsetHeight; } }) } 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); palceImg(); } } } 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; } } </script> </body> ```