前端學習筆記day16 瀑布流案例
阿新 • • 發佈：2019-01-10
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } .itemBox { width: 1050px; position: relative; margin: 0px auto; } .item { /*width: 192px; */ border: 1px solid lightgrey; padding: 4px; position: absolute; } </style> </head> <body> <div class='itemBox'> <div class='item'> <img src="images/P_000.jpg" alt=""> </div> <div class='item'> <img src="images/P_001.jpg" alt=""> </div> <div class='item'> <img src="images/P_002.jpg" alt=""> </div> <div class='item'> <img src="images/P_003.jpg" alt=""> </div> <div class='item'> <img src="images/P_004.jpg" alt=""> </div> <div class='item'> <img src="images/P_005.jpg" alt=""> </div> <div class='item'> <img src="images/P_006.jpg" alt=""> </div> <div class='item'> <img src="images/P_007.jpg" alt=""> </div> <div class='item'> <img src="images/P_008.jpg" alt=""> </div> <div class='item'> <img src="images/P_009.jpg" alt=""> </div> <div class="item"> <img src="./images/P_000.jpg" alt=""> </div> <div class="item"> <img src="./images/P_001.jpg" alt=""> </div> <div class="item"> <img src="./images/P_002.jpg" alt=""> </div> <div class="item"> <img src="./images/P_003.jpg" alt=""> </div> <div class="item"> <img src="./images/P_004.jpg" alt=""> </div> <div class="item"> <img src="./images/P_005.jpg" alt=""> </div> <div class="item"> <img src="./images/P_006.jpg" alt=""> </div> <div class="item"> <img src="./images/P_007.jpg" alt=""> </div> <div class="item"> <img src="./images/P_008.jpg" alt=""> </div> <div class="item"> <img src="./images/P_009.jpg" alt=""> </div> </div> <script> window.onload = function() { var itemBox = document.getElementsByClassName('itemBox')[0]; var item = document.getElementsByClassName('item'); var itemBoxW = itemBox.offsetWidth; var itemW = item[0].offsetWidth; var column = parseInt(itemBoxW/itemW); var distance = (itemBoxW - itemW*column)/(column - 1); var arr = []; waterFull(); console.log('dsjfldf'); window.onscroll = function () { console.log('dsjfldf'); if(window.innerHeight + window.pageYOffset > getMin(arr).minV) { console.log('dsjfldf'); var json = [ { "src": "./images/P_000.jpg" }, { "src": "./images/P_001.jpg" }, { "src": "./images/P_002.jpg" }, { "src": "./images/P_003.jpg" }, { "src": "./images/P_004.jpg" }, { "src": "./images/P_005.jpg" }, { "src": "./images/P_006.jpg" }, { "src": "./images/P_007.jpg" }, { "src": "./images/P_008.jpg" }, { "src": "./images/P_009.jpg" }, { "src": "./images/P_010.jpg" } ]; for(var i = 0;i < json.length;i++) { var div = document.createElement('div'); div.className = 'item'; var img = document.createElement('img'); img.src = json[i].src; div.appendChild(img); itemBox.appendChild(div); } waterFull(); } } function waterFull() { for(var i = 0;i < item.length;i++) { if(i<column) { arr[i] = item[i].offsetHeight; item[i].style.left = (distance + itemW)*i + 'px'; item[i].style.top = 0; } else { var minI = getMin(arr).minI; var minV = getMin(arr).minV; item[i].style.left = minI * (distance + itemW) + 'px'; item[i].style.top = arr[minI] + distance + 'px'; arr[minI] = arr[minI] + distance + item[i].offsetHeight; } } } function getMin(arr) { var o = {}; o.minI = 0; o.minV = arr[0]; for(var i = 1;i<arr.length;i++) { if(arr[i] < o.minV) { o.minI = i; o.minV = arr[i]; } } return o; } } </script> </body> </html>
執行結果：
我覺得我應該不會忘記 當頁面有圖片 需要載入完再做處理時 應該吧要寫的script程式碼放在 window.omload = function() {} 裡面 微笑.jpg；
還有就是window.onscroll = function() {} 起作用的前提是頁面中的內容足夠長，可以在瀏覽器的視窗顯示滾動條才行 微笑*2;