本文用純js代碼手寫一個瀑布流網頁效果，初步實現一個基本的瀑布流布局，以及滾動到底部後類比ajax資料載入新圖片功能。
缺點：
1. 程式不是響應式，不能即時調整頁面寬度；
2. 程式中當新增ajax類比資料圖片後，是將整個頁面的所有圖片都重新置放一次。
3. 程式是等所有圖片載入完成後再讀取圖片的尺寸，實際中肯定不能這樣做。
4. 實際項目中，應該由背景程式給出圖片尺寸值，在js代碼中直接使用圖片的width屬性。
本程式思路：
html結構：
<body> <div id="container"> <div class="box"> <div class="box_img"> <img src="img/1.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="img/2.jpg" /> </div> </div> ... </div></body>
一、初始化布局
1. 設定#container為position:relative;
2. 設定.box為float:left;
3. 網頁載入後對所有圖片進行定位;
3.1 圖片寬度是固定的，計算出當前頁面每行能容納的圖片數num，並得出#container的寬度，然後設定頁面置中；
3.2 迴圈遍曆所有圖片，前num個圖片預設float布局作為第一行，並存入數組BoxHeightArr = [];
3.3 第一行布局完成後，排布下一個圖片，並更新BoxHeightArr[]：
3.3.1 將下一個圖片放到第一行最矮圖片的下方（用position:absolute定位），也就是BoxHeightArr[]中高度最小的那一列，記錄下列數的索引值：minIndex;
3.3.2 更新BoxHeightArr[]中最小的那個值（BoxHeightArr[minIndex]+當前圖片的高度）;
3.4 重複迴圈3.3步驟，直到所有圖片都排布完成
二、即時監測滾動高度，是否要載入新資料
1.初始化完成後得到最後一個圖片距離頂部的高度： lastContentHeight
2.用window.onscroll = function(){...}
即時監測當前頁面的滾動高度為：scrollTop
即時監測當前頁面視窗高度為：pageHeight
3. 當頁面監測到：lastContentHeight < scrollTop + pageHeight 時，用ajax擷取新增圖片的json資料。
三、頁面底部新增內容
1. 用一個迴圈，先建立一個新的圖片容器，添加到底部，然後將json資料中相應的圖片資料如路徑等資訊寫入該容器完成添加圖片。
2. 所有新增圖片添加完成後，對整個頁面的所有圖片及布局重新執行步驟一的初始化操作。
專案檔夾：
index.html: 預先置入部分圖片資料
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="js/app.js"></script> <title>JavaScript瀑布流</title> </head> <body> <div id="container"> <div class="box"> <div class="box_img"> <img src="img/1.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/2.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/3.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/4.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/5.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/6.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/7.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/8.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/9.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/10.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/2.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/3.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/4.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/5.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/6.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/7.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/8.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/9.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/10.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/2.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/3.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/4.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/5.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/6.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/7.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/8.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/9.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/9.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/10.jpg"/> </div> </div> </div> </body></html>
style.css:
*{ margin: 0; padding: 0;}#container{ position: relative;}.box{ padding: 5px; float: left;}.box_img{ padding: 5px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; border-radius: 5px;}.box_img img{ width: 150px; height: auto;}
app.js:
window.onload = function(){ imgLocation("container", "box"); //ajax類比資料 var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"}]} window.onscroll = function(){ if(checkFlag()){ //判斷是否到底部要載入新的資料 var cparent = document.getElementById("container"); //把ajax資料載入進頁面 for(var i=0; i<imgData.data.length; i++){ var ccontent = document.createElement("div"); ccontent.className="box"; cparent.appendChild(ccontent); var boximg = document.createElement("div"); boximg.className = "box_img"; ccontent.appendChild(boximg); var img = document.createElement("img"); img.src = "img/"+imgData.data[i].src; boximg.appendChild(img); } //把所有圖片資料重新置放一次 imgLocation("container", "box"); } }};function checkFlag(){ var cparent = document.getElementById("container"); var ccontent = getChildElement(cparent, "box"); //得到最後一張圖距頂部的高度，滾動高度，視窗高度 var lastContentHeight = ccontent[ccontent.length-1].offsetTop; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var pageHeight = document.documentElement.clientHeight || document.body.clientHeight; console.log(lastContentHeight+":"+scrollTop+":"+pageHeight); if(lastContentHeight < scrollTop + pageHeight){ return true; }}function imgLocation(parent, content){ //將parent下所有的content全部取出 var cparent = document.getElementById(parent); var ccontent = getChildElement(cparent, content); //根據當前瀏覽器視窗的寬度，確定每行圖片數並固定，置中 var imgWidth = ccontent[0].offsetWidth; //offsetWidth = width + padding + border var num = Math.floor(document.documentElement.clientWidth / imgWidth); cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto"; //alert("pause"); //設定一個數組，用來承載第一行的圖片資訊 var BoxHeightArr = []; for(var i=0; i<ccontent.length; i++){ if(i<num){ //第一行的圖片的高度記錄下來 BoxHeightArr[i] = ccontent[i].offsetHeight; //當ajax資料載入後，程式是將所有圖片重新置放，所以第一行的圖片要清除position:absolute ccontent[i].style.position = "static"; }else{ var minHeight = Math.min.apply(null, BoxHeightArr); var minIndex = getminheightLocation(BoxHeightArr, minHeight); //把圖放在第一行圖索引值最小的下面 ccontent[i].style.position = "absolute"; ccontent[i].style.top = minHeight+"px"; ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px"; //圖片放好位置後更新“第一行圖片資訊的最小高度”， //然後利用for迴圈重複這個動作到結束 BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight; } };}//擷取第一行圖片高度最小的索引值function getminheightLocation(BoxHeightArr, minHeight){ for(var i in BoxHeightArr){ if(BoxHeightArr[i] == minHeight){ return i; } }}//擷取所有boxfunction getChildElement(parent, content){ contentArr = parent.getElementsByClassName(content); return contentArr;}
效果圖：
以上就是本文的全部內容，希望對大家學習javascript程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
