固定列寬的簡單瀑布流實現
阿新 • • 發佈：2019-01-06
在看JavaScript實戰中看到瀑布流，決定記錄下程式碼，以備不時之需。
首先寫一個HTML程式碼
<!DOCTYPE html> <html> <head> <title>瀑布流</title> <link rel="stylesheet" href="eg5.css" /> </head> <body> <div class="main"> <div class="col"><img src="1.jpg" alt="" /><p>[1.jpg]</p></div> <div class="col"><img src="2.jpg" alt="" /><p>[2.jpg]</p></div> <div class="col"><img src="3.jpg" alt="" /><p>[3.jpg]</p></div> <div class="col"><img src="4.jpg" alt="" /><p>[4.jpg]</p></div> </div> <script src="base.js"></script> <script src="eg5.js"></script> <script> eg.getColMin();//計算第一批資料的高度 var dl = eg.getDataList(5,35);//初始化一些資料 eg.add(dl);//補充剩下的資料 eg.scroll();//啟動滾動條監聽 </script> </body> </html>
接著就是JavaScript程式碼了
//base.js (function(self){ if(window.eg === undefined){ window.eg = self(window,document); } })(function(window,document){ var eg = {}; eg.$ = function(id){ return document.getElementById(id); }; eg.getElementsByClassName = function(className, element) { if(document.getElementsByClassName){ return (element || document).getElementsByClassName(className) } var children = (element || document).getElementsByTagName('*'); var elements = []; for (var i = 0; i < children.length; i++) { var child = children[i]; var classNames = child.className.split(' '); for (var j = 0; j < classNames.length; j++) { if (classNames[j] == className) { elements.push(child); break; } } } return elements; }; eg.addListener = function(target,type,handler){ if(target.addEventListener){ target.addEventListener(type,handler,false); }else if(target.attachEvent){ target.attachEvent("on"+type,handler); }else{ target["on"+type]=handler; } }; eg.getTop = function(El){ var top = 0; do{ top += El.offsetTop;// }while((El = El.offsetParent).nodeName != 'BODY');// return top; }; return eg; }); //eg5.js eg.getDataList = function(min,max){//模擬構造資料，實際上這些資料由後端提供 var lst = [],n=8; //儲存資料 for(var i=0;i<n;i++){ //每次模擬n條 var k = min + parseInt(Math.random()*(max-min));//隨機指定範圍的數 lst.push(k+".jpg"); //拼接成字串 } return lst; //返回陣列 }; eg.cols = eg.getElementsByClassName("col");//把目標物件快取起來 eg.colh = [0,0,0,0]; //存取每列的高度 eg.getColMin = function(){ //計算4列高度 var min = 0,m = {}; for(var i=0;i<4;i++){ min = parseInt(eg.cols[i].offsetHeight); eg.colh[i] = min; m[min] = i; } return eg.cols[m[Math.min.apply(Array,eg.colh)]||0];//返回最小高度的物件 } eg.add = function(dl){//追加資料的方法 for(var i in dl){ var newDiv = document.createElement("div") var newImg = document.createElement("img"); newImg.src = dl[i]; newDiv.appendChild(newImg); newDiv.innerHTML += '<p>['+dl[i]+']</p>'; eg.getColMin().appendChild(newDiv);//追加到最小高度列裡 } }; eg.scroll = function(){//滾動條事件處理 window.onscroll = function(){//onscroll,onload,onresize只能這樣新增 var doc = document; var top = doc.documentElement.scrollTop || doc.body.scrollTop; //滾動條到頂部的高度 var winH = doc.documentElement.clientHeight||doc.body.clientHeight; //可視視窗的高度 if(Math.min.apply(Array,eg.colh) < top+winH){//如果最小高度小於可視區域，就補充 eg.add(eg.getDataList(1,35));//隨機獲取資料，並追加到最後 } } }