純js實(shí)現(xiàn)瀑布流布局及ajax動態(tài)新增數(shù)據(jù)
本文用純js代碼手寫一個(gè)瀑布流網(wǎng)頁效果,初步實(shí)現(xiàn)一個(gè)基本的瀑布流布局,以及滾動到底部后模擬ajax數(shù)據(jù)加載新圖片功能。
缺點(diǎn):
1. 程序不是響應(yīng)式,不能實(shí)時(shí)調(diào)整頁面寬度;
2. 程序中當(dāng)新增ajax模擬數(shù)據(jù)圖片后,是將整個(gè)頁面的所有圖片都重新定位一次。
3. 程序是等所有圖片加載完成后再讀取圖片的尺寸,實(shí)際中肯定不能這樣做。
4. 實(shí)際項(xiàng)目中,應(yīng)該由后臺程序給出圖片尺寸值,在js代碼中直接使用圖片的width屬性。
本程序思路:
html結(jié)構(gòu):
<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. 設(shè)置#container為position:relative;
2. 設(shè)置.box為float:left;
3. 網(wǎng)頁加載后對所有圖片進(jìn)行定位;
3.1 圖片寬度是固定的,計(jì)算出當(dāng)前頁面每行能容納的圖片數(shù)num,并得出#container的寬度,然后設(shè)置頁面居中;
3.2 循環(huán)遍歷所有圖片,前num個(gè)圖片默認(rèn)float布局作為第一行,并存入數(shù)組BoxHeightArr = [];
3.3 第一行布局完成后,排布下一個(gè)圖片,并更新BoxHeightArr[]:
3.3.1 將下一個(gè)圖片放到第一行最矮圖片的下方(用position:absolute定位),也就是BoxHeightArr[]中高度最小的那一列,記錄下列數(shù)的索引值:minIndex;
3.3.2 更新BoxHeightArr[]中最小的那個(gè)值(BoxHeightArr[minIndex]+當(dāng)前圖片的高度);
3.4 重復(fù)循環(huán)3.3步驟,直到所有圖片都排布完成
二、實(shí)時(shí)監(jiān)測滾動高度,是否要加載新數(shù)據(jù)
1.初始化完成后得到最后一個(gè)圖片距離頂部的高度: lastContentHeight
2.用window.onscroll = function(){...}
實(shí)時(shí)監(jiān)測當(dāng)前頁面的滾動高度為:scrollTop
實(shí)時(shí)監(jiān)測當(dāng)前頁面視窗高度為:pageHeight
3. 當(dāng)頁面監(jiān)測到:lastContentHeight < scrollTop + pageHeight 時(shí),用ajax獲取新增圖片的json數(shù)據(jù)。
三、頁面底部新增內(nèi)容
1. 用一個(gè)循環(huán),先創(chuàng)建一個(gè)新的圖片容器,添加到底部,然后將json數(shù)據(jù)中相應(yīng)的圖片數(shù)據(jù)如路徑等信息寫入該容器完成添加圖片。
2. 所有新增圖片添加完成后,對整個(gè)頁面的所有圖片及布局重新執(zhí)行步驟一的初始化操作。
項(xiàng)目文件夾:
index.html: 預(yù)先置入部分圖片數(shù)據(jù)
<!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模擬數(shù)據(jù) 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()){ //判斷是否到底部要加載新的數(shù)據(jù) var cparent = document.getElementById("container"); //把a(bǔ)jax數(shù)據(jù)加載進(jìn)頁面 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); } //把所有圖片數(shù)據(jù)重新定位一次 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); //根據(jù)當(dāng)前瀏覽器窗口的寬度,確定每行圖片數(shù)并固定,居中 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"); //設(shè)置一個(gè)數(shù)組,用來承載第一行的圖片信息 var BoxHeightArr = []; for(var i=0; i<ccontent.length; i++){ if(i<num){ //第一行的圖片的高度記錄下來 BoxHeightArr[i] = ccontent[i].offsetHeight; //當(dāng)ajax數(shù)據(jù)加載后,程序是將所有圖片重新定位,所以第一行的圖片要清除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循環(huán)重復(fù)這個(gè)動作到結(jié)束 BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight; } } ;} //獲取第一行圖片高度最小的索引值 function getminheightLocation(BoxHeightArr, minHeight){ for(var i in BoxHeightArr){ if(BoxHeightArr[i] == minHeight){ return i; } } } //獲取所有box function getChildElement(parent, content){ contentArr = parent.getElementsByClassName(content); return contentArr; }
效果圖:
以上就是本文的全部內(nèi)容,希望對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)的美女瀑布流效果代碼
- javascript自適應(yīng)寬度的瀑布流實(shí)現(xiàn)思路
- js實(shí)現(xiàn)瀑布流的三種方式比較
- 原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局
- 微信小程序通過js實(shí)現(xiàn)瀑布流布局詳解
- 解析瀑布流布局:JS+絕對定位的實(shí)現(xiàn)
- 純js實(shí)現(xiàn)瀑布流展現(xiàn)照片(自動適應(yīng)窗口大小)
- vue.js組件vue-waterfall-easy實(shí)現(xiàn)瀑布流效果
- js實(shí)現(xiàn)瀑布流的一種簡單方法實(shí)例分享
- JavaScript實(shí)現(xiàn)瀑布動畫
相關(guān)文章
JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動漂浮廣告代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動漂浮廣告代碼,通過JavaScript結(jié)合時(shí)間函數(shù)動態(tài)響應(yīng)頁面元素滾動事件實(shí)現(xiàn)懸浮廣告的緩沖漂浮效果,非常簡單實(shí)用,需要的朋友可以參考下2015-11-11