JS原生瀑布流效果實(shí)現(xiàn)
今天早起看了慕課的瀑布流，的確講的十分詳細(xì)，也十分的好，我在博客里也就只能給代碼加些注釋，和說一下思路。建議大家去看一下慕課的瀑布流教程，非常詳細(xì)，每一個(gè)細(xì)節(jié)都講的非常好，只要懂JS的基礎(chǔ)代碼，看起來應(yīng)該不是多大問題，里面沒有太難得方法，但自己寫不出來還是因?yàn)樗悸飞嫌袉栴}，下面就詳細(xì)說一下幾個(gè)重點(diǎn)方法的代碼，建議大家去慕課詳細(xì)學(xué)習(xí)
HTML 和CSS沒有太難得地方
<div id="main">//一個(gè)main包含了整個(gè)頁面內(nèi)容，box用來做一個(gè)外容器，img作為圖片容器
<div class="box">
<div class="pic">
<img src="img/0.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/0.jpg">
</div>
</div>
<div>
//CSS
//這里面的填充用padding值，因?yàn)閛ffsetHeight是包括一個(gè)padding而不包括margin的方便以后高度的測量
*{
margin: 0px;
padding: 0px;
}
#main{
position: relative;//在main上設(shè)置相對定位，在JS給box設(shè)置絕對定位，來控制圖片位置
}
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius:5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width: 168px;//瀑布流統(tǒng)一寬度但不同一高度，高度為自適應(yīng)就好
height: auto;
}
JS代碼
在我們寫JS代碼之前，我們需要搞明白我們需要什么方法，是否需要封裝起來調(diào)用，我們第一步要干什么，
那么我們第一步要干什么呢？我們做瀑布流首先要做的是獲取到所有小部件也就是box，我們無論做什么處理都是對box的處理或者img的處理，所以要獲取到所有的box，所以我們可以把它封裝起來
//根據(jù)class獲取元素
function getByClass(parent,clsName){//傳入父元素和想要的class
var boxArr=new Array//用來存儲獲取到所有class為box的元素，可以用對象的方式也可以用[]創(chuàng)建
oElements=parent.getElementsByTagName('*');//取出所有子元素
for (var i = 0; i < oElements.length; i++) {//我們需要遍歷所有的子元素
if(oElements[i].className==clsName)//如果我們找到了相應(yīng)的子元素
boxArr.push(oElements[i]);//取出傳過來相等的className
//push是數(shù)組自帶的方法
};
return boxArr;返回?cái)?shù)組
}
這樣我們就得到了我們想要的class，之后該怎么辦呢，先從一個(gè)box下手，我們需要取得第一排到底有多少個(gè)元素，因?yàn)橹拔覀儾]有確定我們main的寬度，所以是自適應(yīng)的也就是說我們把頁面縮小，我們每一排的元素也會相應(yīng)的減少，為了能讓瀑布流的代碼有更好的應(yīng)用性，讓不同尺寸的圖片都可以應(yīng)用，所以，我們需要手動計(jì)算一排究竟可以放多少張圖片呢，那如何計(jì)算呢？
我們可以算出頁面總寬在box的寬，就OK了
var oBoxW=oBoxs[0].offsetWidth;//box的寬，提到了里面計(jì)算了padding的值
var clos=Math.floor(document.documentElement.clientWidth/oBoxW)//求列數(shù)
這樣我們就求出了列數(shù)，無論圖片的寬度如何變，我們都可以算出來
floor是用來取整數(shù)的，因?yàn)槲覀兊膒x是沒有浮點(diǎn)數(shù)類型的避免計(jì)算錯誤，所以取整
oparent.style.cssText='width:'+oBoxW*clos+'px; margin :0 auto';
設(shè)置main的寬度
我們已經(jīng)取得了列數(shù)之后呢我們第一排的圖片肯定是一排寬度相等，長度不一是吧，也就是說，我們第二排的圖片需要接上第一排圖片的后邊，我們不能一排一排操作，但我們可以一個(gè)一個(gè)操作，怎么操作呢，我們可以取到第一排高度最小的將下一張圖片，也就是如果第一排7個(gè)，那下一個(gè)就是第八個(gè)，把第八個(gè)圖片放在最小高度的圖片上，如何實(shí)現(xiàn)呢，我們先試想一下，我們首先需要求出第一排中最小，我們有一個(gè)Math.min求最小，但是呢我們這個(gè)函數(shù)無法傳入用數(shù)組，只能是具體的數(shù)怎么半呢，apply來擴(kuò)展作用域
用代碼展示下
var hArr=[];//每一列高度的值
for (var i = 0; i < oBoxs.length; i++) {
if(i<clos){//先記錄好第一排高度
hArr.push(oBoxs[i].offsetHeight);//放進(jìn)去
}else{//如果到達(dá)第二排，就開始計(jì)算
var minH=Math.min.apply(Math,hArr);最小值計(jì)算
//為什么可以呢，本來不能傳數(shù)組，我們通過apply綁定作用域在Math上，也就是說還是執(zhí)行這個(gè)函數(shù)但是，apply第二個(gè)參數(shù)需要是數(shù)組，所以間接地把參數(shù)變成了數(shù)組傳進(jìn)去，也就是說我們還是用了Math函數(shù)但值變成了數(shù)組里的值。
//console.log(minH)
var index=getMinhIndex(hArr,minH)//獲取索引
oBoxs[i].style.position="absolute";我們就可以找到，傳入數(shù)組和最小值
oBoxs[i].style.top=minH+"px";那下一張圖片的高度救球出來了
oBoxs[i].style.left=oBoxW*index+"px";左邊的距離就是索引乘以元素的寬
hArr[index]+=oBoxs[i].offsetHeight;//我們添加了一個(gè)圖片后需要刷新數(shù)組里的高度，再去尋找下一個(gè)最小的，再向他的下面添加圖片，一次循環(huán)
}
};
function getMinhIndex (arr,val){
for(var i in arr){//在其中找到最小值，返回索引
if(arr[i]==val){
return i;
}
}
}
以上就大體做出了一個(gè)瀑布流的樣式，就差拖動滾動條加載了，這里面肯定需要后臺的支持，在慕課上，老師做了一個(gè)偽處理，這里建議看慕課視頻，有圖解十分清楚，我用語言或圖片不太好表達(dá)
var dataInt={"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]}//我們自己寫一個(gè)json數(shù)據(jù)
window.onscroll=function(){
if(checkScrollSlide){
var oparent=document.getElementById("main")
//將數(shù)據(jù)快渲染到當(dāng)前頁面尾部
for (var i = 0; i < dataInt.data.length; i++) {//添加
var oBox=document.createElement("div");
oBox.className="box";
oparent.appendChild(oBox);
var opic=document.createElement('div');
opic.className='pic';
oBox.appendChild(opic);
var oimg=document.createElement('img');
oimg.src='img/'+dataInt.data[i].src;//將數(shù)據(jù)加進(jìn)去
opic.appendChild(oimg)
}
waterfall('main','box');//一會看完整代碼，這就是剛才那些的封裝
}
}
function checkScrollSlide(){//檢測是否具備加載數(shù)據(jù)塊的條件
var oparent=document.getElementById('main');
var oBoxs=getByClass(oparent,'box')
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2)求出最后一個(gè)圖片的一半距離頁面頂端的距離
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.body.clientHeight||document.documentElement.clientHeight;
return(lastBoxH<scrollTop+height)?true:false;//如果頁面距離頂部（包括滾輪）的距離比滾輪加頁面距離小，那么就返回true
}
完整JS代碼
window.onload=function(){
waterfall('main','box');
//json
var dataInt={"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]}
window.onscroll=function(){
if(checkScrollSlide){
var oparent=document.getElementById("main")
//將數(shù)據(jù)快渲染到當(dāng)前頁面尾部
for (var i = 0; i < dataInt.data.length; i++) {
var oBox=document.createElement("div");
oBox.className="box";
oparent.appendChild(oBox);
var opic=document.createElement('div');
opic.className='pic';
oBox.appendChild(opic);
var oimg=document.createElement('img');
oimg.src='img/'+dataInt.data[i].src;
opic.appendChild(oimg)
}
waterfall('main','box');
}
}
}
function waterfall(parent,box){
//將main下所有class為box的元素取出來
var oparent=document.getElementById(parent);
var oBoxs=getByClass(oparent,box)
//console.log(oBox.length)
//計(jì)算整個(gè)頁面的列數(shù)（頁面寬/box寬）
var oBoxW=oBoxs[0].offsetWidth;
//console.log(oBoxW);
var clos=Math.floor(document.documentElement.clientWidth/oBoxW)//求列數(shù)
//console.log(clos)
//設(shè)置main的寬
oparent.style.cssText='width:'+oBoxW*clos+'px; margin :0 auto';
var hArr=[];//每一列高度的值
for (var i = 0; i < oBoxs.length; i++) {
if(i<clos){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH=Math.min.apply(Math,hArr);
//console.log(minH)
var index=getMinhIndex(hArr,minH)//索引
oBoxs[i].style.position="absolute";
oBoxs[i].style.top=minH+"px";
oBoxs[i].style.left=oBoxW*index+"px";
hArr[index]+=oBoxs[i].offsetHeight;//更改數(shù)組
}
};
//console.log(hArr)
}
//根據(jù)class獲取元素
function getByClass(parent,clsName){
var boxArr=new Array//用來存儲獲取到所有class為box的元素
oElements=parent.getElementsByTagName('*');//取出所有子元素
for (var i = 0; i < oElements.length; i++) {
if(oElements[i].className==clsName)
boxArr.push(oElements[i]);//取出傳過來相等的className
};
return boxArr;
}
function getMinhIndex (arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
function checkScrollSlide(){//檢測是否具備加載數(shù)據(jù)塊的條件
var oparent=document.getElementById('main');
var oBoxs=getByClass(oparent,'box')
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2)
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.body.clientHeight||document.documentElement.clientHeight;
return(lastBoxH<scrollTop+height)?true:false;
}
我的瀑布流圖
以上所述是小編給大家介紹的JS原生瀑布流效果實(shí)現(xiàn)詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
坐標(biāo)軸刻度取值算法之源于echarts的y軸刻度計(jì)算需求
坐標(biāo)軸刻度作為直角坐標(biāo)系中重要的組成部分,我們需要學(xué)會合理的設(shè)置坐標(biāo)軸的刻度,下面這篇文章主要給大家介紹了關(guān)于坐標(biāo)軸刻度取值算法之源于echarts的y軸刻度計(jì)算需求的相關(guān)資料,需要的朋友可以參考下2022-06-06
讓innerText在firefox火狐和IE瀏覽器都能用的寫法
下面的代碼主要是用來解決firefox瀏覽器不支持innerText的問題，需要的朋友可以參考下。2011-05-05
javascript實(shí)現(xiàn)顏色漸變的方法
這篇文章介紹了javascript實(shí)現(xiàn)顏色漸變的方法，有需要的朋友可以參考一下2013-10-10
這篇文章主要介紹了JS作為值的函數(shù)用法,結(jié)合實(shí)例形式分析了javascript處理函數(shù)作為參數(shù)的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JS中作用域以及變量范圍,需要的朋友可以參考下2020-07-07
在使用uni-app完成掃碼功能時(shí),有時(shí)需要聚焦文本框的同時(shí),需要軟鍵盤消失,下面這篇文章主要給大家介紹了關(guān)于uniapp中input聚焦禁止軟鍵盤彈出的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了一文幫你理解PReact10.5.13源碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了讓mocha支持ES6模塊的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框
Toast相信對于利用微信小程序開發(fā)的朋友們來說都不陌生，有時(shí)候官方的樣式并不能滿足業(yè)務(wù)要求，怎么辦呢，當(dāng)然有解決辦法了。有一個(gè)插件可以直接幫我們完成WeToast，這篇文章主要給大家介紹了微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框的相關(guān)資料，需要的朋友可以參考下。2017-06-06
TypeScript遍歷Array的方法(for,forEach,every)
本文主要介紹了TypeScript遍歷Array的方法(for,forEach,every)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06