原生js實現的瀑布流布局
阿新 • • 發佈：2017-09-06
n) top 開始 rrh lang java ansi return 一個
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <style type="text/css"> div{ background: #ccc; width: 200px; position: absolute; transition:0.5s; } </style></head> <body> <script type="text/javascript"> createDiv () function createDiv () { for (var i = 0; i < 20; i ++) { var div = document.createElement(‘div‘); var rnd = Math.floor(Math.random() * 300 + 50);//div的高度在50到350之間 div.style.height = rnd + "px"; div.innerHTML = i; document.body.appendChild(div); }; change() } function change() { var aDiv = document.getElementsByTagName(‘div‘);// alert(aDiv.length); var windowCW = document.documentElement.clientWidth; //窗口視口的寬度 var n = Math.floor(windowCW / 210); //一行能容納多少個div，並向下取整 if (n <= 0) {return}; // alert(n); var t = 0; var center = (windowCW - n * 210) / 2; //居中 var arrH = []; //定義一個數組存放div的高度 for (var i = 0; i < aDiv.length; i ++) { var j = i % n; if (arrH.length == n) { //一行排滿n個後到下一行 var min = findMin(arrH); //從最“矮”的排起，可以從下圖的序號中看得出來，下一行中序號是從矮到高排列的 aDiv[i].style.left = center + min * 210 + "px"; aDiv[i].style.top = arrH[min] + 10 + "px"; arrH[min] += aDiv[i].offsetHeight + 10; // alert(min); }else{ arrH[j] = aDiv[i].offsetHeight; aDiv[i].style.left = center + 200 * j+10 * j + "px"; aDiv[i].style.top = 0; } }; } window.onresize = function(){ //窗口改變也調用函數 change(); } window.onscroll= function () { // 頁面總高度 var bodyHeight = document.documentElement.offsetHeight; // 可視區高度 var windowHeight = document.documentElement.clientHeight; //滾動條的高度 var srcollTop = document.documentElement.scrollTop || document.body.scrollTop; var srcollH = document.body.scrollHeight; // alert(srcollH); if (srcollTop+windowHeight >= srcollH-20) { createDiv(); }; } function findMin(arr) { var m = 0; for (var i = 0; i < arr.length; i ++) { m = Math.min(arr[m], arr[i]) == arr[m] ? m : i; } return m; } </script> </body> </html>
基本思路:
運用position: absolute來進行定位布局,從第二排開始每次尋找高度最小的位置插入元素
原生js實現的瀑布流布局