纯js实现瀑布流布局及ajax动态新增数据
生活随笔
收集整理的這篇文章主要介紹了
纯js实现瀑布流布局及ajax动态新增数据
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
本文用純js代碼手寫一個瀑布流網(wǎng)頁效果，初步實現(xiàn)一個基本的瀑布流布局，以及滾動到底部后模擬ajax數(shù)據(jù)加載新圖片功能。
缺點：
1. 程序不是響應式，不能實時調(diào)整頁面寬度；
2. 程序中當新增ajax模擬數(shù)據(jù)圖片后，是將整個頁面的所有圖片都重新定位一次。
3. 程序是等所有圖片加載完成后再讀取圖片的尺寸，實際中肯定不能這樣做。
4. 實際項目中，應該由后臺程序給出圖片尺寸值，在js代碼中直接使用圖片的width屬性。?
本程序思路：
html結構：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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. 網(wǎng)頁加載后對所有圖片進行定位;
3.1 圖片寬度是固定的，計算出當前頁面每行能容納的圖片數(shù)num，并得出#container的寬度，然后設置頁面居中；
3.2 循環(huán)遍歷所有圖片，前num個圖片默認float布局作為第一行，并存入數(shù)組BoxHeightArr = [];
3.3 第一行布局完成后，排布下一個圖片，并更新BoxHeightArr[]：
3.3.1 將下一個圖片放到第一行最矮圖片的下方（用position:absolute定位），也就是BoxHeightArr[]中高度最小的那一列，記錄下列數(shù)的索引值：minIndex;
3.3.2 更新BoxHeightArr[]中最小的那個值（BoxHeightArr[minIndex]+當前圖片的高度）;
3.4 重復循環(huán)3.3步驟，直到所有圖片都排布完成
二、實時監(jiān)測滾動高度，是否要加載新數(shù)據(jù)
1.初始化完成后得到最后一個圖片距離頂部的高度： lastContentHeight
2.用window.onscroll = function(){...}
實時監(jiān)測當前頁面的滾動高度為：scrollTop
實時監(jiān)測當前頁面視窗高度為：pageHeight
3. 當頁面監(jiān)測到：lastContentHeight < scrollTop + pageHeight 時，用ajax獲取新增圖片的json數(shù)據(jù)。
三、頁面底部新增內(nèi)容
1. 用一個循環(huán)，先創(chuàng)建一個新的圖片容器，添加到底部，然后將json數(shù)據(jù)中相應的圖片數(shù)據(jù)如路徑等信息寫入該容器完成添加圖片。
2. 所有新增圖片添加完成后，對整個頁面的所有圖片及布局重新執(zhí)行步驟一的初始化操作。
?項目文件夾：
?
index.html: 預先置入部分圖片數(shù)據(jù)
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | <!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:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | *{ ?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:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 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"); ???//把ajax數(shù)據(jù)加載進頁面 ???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ù)當前瀏覽器窗口的寬度，確定每行圖片數(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ù)組，用來承載第一行的圖片信息 ?var BoxHeightArr = []; ?for(var i=0; i<ccontent.length; i++){ ??if(i<num){ ???//第一行的圖片的高度記錄下來 ???BoxHeightArr[i] = ccontent[i].offsetHeight; ???//當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)重復這個動作到結束 ???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; } |
轉載于:https://www.cnblogs.com/firstdream/p/5497542.html
總結
以上是生活随笔為你收集整理的纯js实现瀑布流布局及ajax动态新增数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： thymeleaf的常见用法
- 下一篇： 第2月第5天 arc invocatio