基于JavaScript實(shí)現(xiàn)瀑布流效果(循環(huán)漸近)
1.建立Html模版
想法是先用一個(gè)div container承載所有內(nèi)容,然后div box用來放置圖片,最后div box_border來當(dāng)圖片框,代碼如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流</title> </head> <body> <div class="container" id="container"> <div class="box_border" id="box_border"> <div class="box" id="box1"> <img src="image/01.jpg"> </div> <!--把Box復(fù)制多份,這里因?yàn)榇a重復(fù)省略了--> </div> </div> </body> </html>
2.通過css簡(jiǎn)單設(shè)置樣式
主要設(shè)置水平放置,相框顏色,邊界之類的
/* 邊界不留空,背景黑灰 */ body{ margin: 0px; background: darkgray; } /* 總布局設(shè)置為相對(duì)布局 */ .container{ position: relative; } /* 設(shè)置box屬性 */ .box{ padding: 5px; float: left; } /*設(shè)置圖片邊框陰影和圓角 */ .box_border{ padding: 5px; border: 1px solid #cccccc; box-shadow: 0px 0px 5px #ccc; border-radius: 5px; } /*設(shè)置圖片格式*/ .box_border img{ width: 150px; height: auto; }
3.JS控制每一行所擺放的圖片個(gè)數(shù)
上面的css布局之后,瀏覽器窗口大小改變,里面的圖片數(shù)量也會(huì)改變,現(xiàn)在要用JS固定住每一行的圖片數(shù)量,對(duì)于不同尺寸的屏幕都能做到很好的效果
/* 用于加載其他函數(shù) */ window.onload = function(){ setImgLocation("container"); } /* 設(shè)置圖片個(gè)數(shù) */ function setImgLocation(parent){ var cparent = document.getElementById(parent);//得到父節(jié)點(diǎn) var childArray = getChildNodes(cparent);//得到圖片數(shù)量 var imgWidth = childArray[0].offsetWidth;//獲取照片寬度 var screenWidth = document.documentElement.clientWidth;//獲取瀏覽器寬度 var count = Math.floor(screenWidth/imgWidth);//每行的個(gè)數(shù) cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//設(shè)置其寬度并居中 } /* 獲取全部圖片的個(gè)數(shù) */ function getChildNodes(parent){ var childArray =[];//定義一個(gè)數(shù)組存放圖片box var tempNodes = parent.getElementsByTagName("*");//獲取父節(jié)點(diǎn)下的所有節(jié)點(diǎn) //循環(huán)添加class為box的節(jié)點(diǎn) for(var i = 0;i<tempNodes.length;i++){ if(tempNodes[i].className == "box"){ childArray.push(tempNodes[i]); } } return childArray;//返回所有的子節(jié)點(diǎn) }
效果圖:針對(duì)不同屏幕大小顯示的個(gè)數(shù)是不一樣的
4.JS實(shí)現(xiàn)靜態(tài)瀑布流
先實(shí)現(xiàn)靜態(tài)的布局,也就是瀏覽器下拉不會(huì)自動(dòng)刷新出新的圖片.
實(shí)現(xiàn)排列算法很簡(jiǎn)單
1.把第一排圖片的高度全部存到一個(gè)數(shù)組
2.計(jì)算出第一排中的圖片的最小高度和對(duì)應(yīng)位置
3.把第一排之后的第一個(gè)圖片放到該位置上
4.重新設(shè)置該位置的高度為兩個(gè)圖片相加
5.循環(huán)2剩余全部圖片
代碼:
/* 用于加載其他函數(shù) */ window.onload = function(){ setImgLocation("container"); } /* 設(shè)置圖片個(gè)數(shù)及位置排列 */ function setImgLocation(parent){ var cparent = document.getElementById(parent);//得到父節(jié)點(diǎn) var childArray = getChildNodes(cparent);//得到圖片數(shù)量 var imgWidth = childArray[0].offsetWidth;//獲取照片寬度 var screenWidth = document.documentElement.clientWidth;//獲取瀏覽器寬度 var count = Math.floor(screenWidth/imgWidth);//每行的個(gè)數(shù) cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//設(shè)置其寬度并居中 //定義數(shù)組,存放第一行照片高度 var imgHArray = []; //循環(huán)遍歷圖片 for(var i=0;i<childArray.length;i++){ //如果圖片在第一行則獲取高度 if(i<count){ imgHArray[i] = childArray[i].offsetHeight; }else//否則把最小高度的填充剩余圖片 { var minHeight = Math.min.apply(null,imgHArray);//獲取最小高度 var minIndex = getMinIndex(minHeight,imgHArray);//獲取最小高度對(duì)應(yīng)的下標(biāo) childArray[i].style.position = "absolute";//設(shè)置要填充的圖片盒子為絕對(duì)布局,否則不能更換位置 childArray[i].style.top = minHeight+"px";//設(shè)置要填充圖片距頂高度 childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//設(shè)置要填充圖片距左高度 imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把當(dāng)前位置高度設(shè)為兩個(gè)圖片相加 //開始下一輪循環(huán) } } } /* 獲取最小高度對(duì)應(yīng)的下標(biāo) */ function getMinIndex(minHeight,imgHArray){ for(var i in imgHArray){ if(imgHArray[i] == minHeight){ return i; } } } /* 獲取全部圖片的個(gè)數(shù) */ function getChildNodes(parent){ var childArray =[];//定義一個(gè)數(shù)組存放圖片box var tempNodes = parent.getElementsByTagName("*");//獲取父節(jié)點(diǎn)下的所有節(jié)點(diǎn) //循環(huán)添加class為box的節(jié)點(diǎn) for(var i = 0;i<tempNodes.length;i++){ if(tempNodes[i].className == "box"){ childArray.push(tempNodes[i]); } } return childArray;//返回所有的子節(jié)點(diǎn) }
5.js實(shí)現(xiàn)動(dòng)態(tài)加載
動(dòng)態(tài)加載也就是滾動(dòng)條永遠(yuǎn)滑不到底部,要解決動(dòng)態(tài)加載我們需要考慮兩個(gè)問題:
1.什么時(shí)候加載?
滑動(dòng)距離+瀏覽器高度>最后一張圖片距離頂部的距離
2.怎樣加載?
通過創(chuàng)建新的節(jié)點(diǎn),把創(chuàng)建的節(jié)點(diǎn)添加進(jìn)去即可
最終代碼:
/* 用于加載其他函數(shù) */ window.onload = function() { var cparent = document.getElementById("container");//得到父節(jié)點(diǎn) setImgLocation(cparent); //設(shè)置加載的圖片 var data = ["image/01.jpg", "image/02.jpg", "image/03.jpg", "image/04.jpg", "image/05.jpg", "image/06.jpg", "image/07.jpg", "image/08.jpg", "image/09.jpg", "image/11.jpg", "image/12.jpg", "image/13.jpg", "image/14.jpg", "image/15.jpg", "image/16.jpg", "image/17.jpg"]; //滑動(dòng)監(jiān)聽 window.onscroll = function () { if (checkLoad(cparent)) { for (var i = 0; i < data.length; i++) { //創(chuàng)建新的節(jié)點(diǎn) var div1 = document.createElement("div"); div1.className = "box"; var div2 = document.createElement("div"); div2.className = "box_border"; var img = document.createElement("img"); img.className = ".box_border img"; img.src = data[i]; div2.appendChild(img); div1.appendChild(div2); cparent.appendChild(div1); } setImgLocation(cparent);//創(chuàng)建節(jié)點(diǎn)后重新排列 } } } /* 檢查是否應(yīng)該加載 */ function checkLoad(cparent){ var childArray = getChildNodes(cparent);//得到圖片個(gè)數(shù) var lastImgHight = childArray[childArray.length-1].offsetTop;//得到最后一張圖片距離頂部高度 var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;//獲得滑動(dòng)距離(瀏覽器兼容性真煩人) var browserHeight = document.documentElement.clientHeight;//獲得瀏覽器高度 if(lastImgHight < scrollHeight+browserHeight){//判斷是否加載 return true; }else { return false; } } /* 設(shè)置圖片個(gè)數(shù)及位置排列 */ function setImgLocation(cparent){ var childArray = getChildNodes(cparent);//得到圖片數(shù)量 var imgWidth = childArray[0].offsetWidth;//獲取照片寬度 var browserWidth = document.documentElement.clientWidth;//獲取瀏覽器寬度 var count = Math.floor(browserWidth/imgWidth);//每行的個(gè)數(shù) cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//設(shè)置其寬度并居中 //定義數(shù)組,存放第一行照片高度 var imgHArray = []; //循環(huán)遍歷圖片 for(var i=0;i<childArray.length;i++){ //如果圖片在第一行則獲取高度 if(i<count){ imgHArray[i] = childArray[i].offsetHeight; }else//否則把最小高度的填充剩余圖片 { var minHeight = Math.min.apply(null,imgHArray);//獲取最小高度 var minIndex = getMinIndex(minHeight,imgHArray);//獲取最小高度對(duì)應(yīng)的下標(biāo) childArray[i].style.position = "absolute";//設(shè)置要填充的圖片盒子為絕對(duì)布局,否則不能更換位置 childArray[i].style.top = minHeight+"px";//設(shè)置要填充圖片距頂高度 childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//設(shè)置要填充圖片距左高度 imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把當(dāng)前位置高度設(shè)為兩個(gè)圖片相加 //開始下一輪循環(huán) } } } /* 獲取最小高度對(duì)應(yīng)的下標(biāo) */ function getMinIndex(minHeight,imgHArray){ for(var i in imgHArray){ if(imgHArray[i] == minHeight){ return i; } } } /* 獲取全部圖片的個(gè)數(shù) */ function getChildNodes(parent){ var childArray =[];//定義一個(gè)數(shù)組存放圖片box var tempNodes = parent.getElementsByTagName("*");//獲取父節(jié)點(diǎn)下的所有節(jié)點(diǎn) //循環(huán)添加class為box的節(jié)點(diǎn) for(var i = 0;i<tempNodes.length;i++){ if(tempNodes[i].className == "box"){ childArray.push(tempNodes[i]); } } return childArray;//返回所有的子節(jié)點(diǎn) }
到此這篇關(guān)于基于JavaScript實(shí)現(xiàn)瀑布流效果(循環(huán)漸近)的文章就介紹到這了,更多相關(guān)js瀑布流內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript中循環(huán)遍歷Array與Map的方法小結(jié)
- javascript實(shí)現(xiàn)label標(biāo)簽跳出循環(huán)操作
- 理解javascript中Map代替循環(huán)
- javascript每日必學(xué)之循環(huán)
- 三個(gè)js循環(huán)的關(guān)鍵字示例(for與while)
- js實(shí)現(xiàn)異步循環(huán)實(shí)現(xiàn)代碼
- 高性能JavaScript循環(huán)語句和條件語句
- javascript圖片切換綜合實(shí)例(循環(huán)切換、順序切換)
- 理解JS事件循環(huán)
- 深入探究JavaScript中for循環(huán)的效率問題及相關(guān)優(yōu)化
相關(guān)文章
Javascript類型轉(zhuǎn)換的規(guī)則實(shí)例解析
這篇文章主要介紹了Javascript類型轉(zhuǎn)換的規(guī)則實(shí)例解析,涉及到j(luò)avascript類型轉(zhuǎn)換相關(guān)知識(shí),對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2016-02-02淺談js停止事件冒泡 阻止瀏覽器的默認(rèn)行為(阻止超連接 #)
下面小編就為大家?guī)硪黄獪\談js停止事件冒泡 阻止瀏覽器的默認(rèn)行為(阻止超連接 #)。2017-02-02微信小程序?qū)崿F(xiàn)登錄注冊(cè)tab切換效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄注冊(cè)切換效果,簡(jiǎn)易版tab切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11利用es6 new.target來對(duì)模擬抽象類的方法
這篇文章主要介紹了利用es6 new.target來對(duì)模擬抽象類的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05IE6下出現(xiàn)JavaScript未結(jié)束的字符串常量錯(cuò)誤的解決方法
JavaScript文件只在IE6下出錯(cuò)(“未結(jié)束的字符串常量”)的解決辦法。2010-11-11