數組實現瀑布流 · javascript

# 瀑布流思路 1.獲取屏幕的width,看一排能放置幾個box 2.對所有的box遍歷,將一排box,放入一個數組 ~~~ box.forEach(function(value,index){ if(index<num){ arr.push(value.offsetHeight) } }) ~~~ 3.從高度最小的下標位置,放置圖片（使用定位 left=最小高度圖片的offsetLeft top=數組.indexOf(minHeight)） ~~~ left=minIndex-->offsetLeft top=minHeight ~~~ 4.對數組的最小位置的值進行從新設置 5.當scrollHeight+clientHeight>最后一個元素距離頂部高度+自身高度一邊時滾動 ### 代碼如下： ~~~ <!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> <script src="js/index.js"></script> <style> * { margin: 0; padding: 0 } img { width: 230px; padding: 5px; vertical-align: bottom; } .box { /* position: relative; */ float: left; width: 240px; border: 1px solid rgba(51, 51, 51, 0.1); border-radius: 5px } #container { overflow: hidden; margin-left: auto; margin-right: auto; } </style> </head> <body> <div id="container"> <div class="box"> <img src="images/01.jpg" alt=""> </div> <div class="box"> <img src="images/02.jpg" alt=""> </div> <div class="box"> <img src="images/03.jpg" alt=""> </div> <div class="box"> <img src="images/04.jpg" alt=""> </div> <div class="box"> <img src="images/05.jpg" alt=""> </div> <div class="box"> <img src="images/06.jpg" alt=""> </div> <div class="box"> <img src="images/07.jpg" alt=""> </div> <div class="box"> <img src="images/08.jpg" alt=""> </div> <div class="box"> <img src="images/09.jpg" alt=""> </div> <div class="box"> <img src="images/10.jpg" alt=""> </div> <div class="box"> <img src="images/11.jpg" alt=""> </div> <div class="box"> <img src="images/12.jpg" alt=""> </div> </div> <script> 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 box = document.getElementsByClassName("box"); //放置圖片 place_img(); //當滾動條滾動時執行函數 window.onscroll = function () { //判斷是否到達底部 if (sCondition()) { //添加img元素 scrollShow(); } } function scrollShow() { var arr = url.dataUrl; for (var i = 0; i < arr.length; i++) { var box = document.createElement("box"); box.className = "box"; // 創建img元素 var img = document.createElement("img"); //img內容 img.setAttribute("src", "images/" + arr[i].src); //添加img元素 box.appendChild(img); container.appendChild(box); place_img(); } } function place_img() { // 1.獲取屏幕的width,看一排能放幾張圖片 var dw = window.innerWidth; var boxWidth = box[0].offsetWidth; var num = Math.floor(dw / boxWidth) container.style.width = boxWidth * num + "px"; // 2.獲取前五張圖片的height,將其存入一個數組 var box_arr = Array.prototype.slice.call(box, 0); var height_arr = [] box_arr.forEach(function (value, index) { if (index < num) { var height = value.offsetHeight; height_arr.push(height); } else { // 3.從數組中高度最小的地方開始放置圖片 var minHeight = Math.min(...height_arr); var minIndex = height_arr.indexOf(minHeight); var offsetLeft = box[minIndex].offsetLeft; box_arr[index].style.position = "absolute"; // left為最大高度位置圖片的offsetLeft box_arr[index].style.left = offsetLeft + "px"; // top為最小高度 box_arr[index].style.top = minHeight + "px" // 4.重新設置最小位置的高度 height_arr[minIndex] += box_arr[index].offsetHeight; } }) } //當滾動條在最底部時的判定條件 function sCondition() { //滾動條距離頂部的高度 var sH = document.documentElement.scrollTop; //可視區域的高度 var cH = document.documentElement.clientHeight; var lastH = box[box.length - 1].offsetTop + box[box.length - 1].offsetHeight / 2; return (sH + cH > lastH) ? true : false; } } </script> </body> </html> ~~~