js瀑布流布局的實(shí)現(xiàn)
更新時(shí)間：2020年06月28日 09:59:32 作者：Jeslie-He
這篇文章主要為大家詳細(xì)介紹了js瀑布流布局的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)瀑布流布局的具體代碼，供大家參考，具體內(nèi)容如下
原理：
1、瀑布流布局，要求進(jìn)行布局的元素等寬，然后計(jì)算元素的寬與瀏覽器的寬度之比，得到需要布置的列數(shù)。
2、創(chuàng)建一個(gè)數(shù)組，長(zhǎng)度為列數(shù)，數(shù)組元素為每一列已布置元素的總高度。（一開(kāi)始為0）。
3、將未布置的元素，依次布置到高度最小的那一列，然后更新這一列的高度，就得到了瀑布流布局
實(shí)現(xiàn)
布局
<body> <div id="content"> <div id="box"> <img src="" > </div> <div id="box"> <img src="" > </div> <div id="box"> <img src="" > </div> <div id="box"> <img src="" > </div> <div id="box"> <img src="" > </div> <div id="box"> <img src="" > </div> <div id="box"> <img src="" > </div> <!-- 很多很多圖片 --> </div> </body>
js：
$(function(){
waterFall();
})
function waterFall(){
//計(jì)算出每個(gè)圖片盒子的寬度
var box = $('#box');
var boxWidth = box.outerWidth();
//計(jì)算出屏幕的寬度
var screenWidth = $(window).width();
//計(jì)算出有多少列
var cols = parseInt(screenWidth / boxWidth);
//定義一行圖片盒子的高度數(shù)組,找出數(shù)組中最少的值
var heigthArr =[];
//所有圖片循環(huán)
$.each(box,function(item,index){
var boxHeigth = box.outerHeigth();
//判斷是否第一排
if(index < cols){
//如果是第一排,取高度,追加到數(shù)組中
heigthArr[index] = boxHeigth;
}else{
//最小圖片高度
var minBoxHeigth = Math.min.apply(null,heigthArr);
//最小圖片的索引
var minBoxIndex = $.inArray(minBoxHeigth,heigthArr);
$(item).css({
position:'absolute',
left:minBoxIndex * boxWidth + 'px',
top:minBoxHeigth + 'px'
});
heigthArr[minBoxIndex]+=boxHeigth;//更新高度
}
})
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js數(shù)組常用19種方法(你會(huì)的到底有多少呢)
這篇文章主要給大家介紹了關(guān)于js數(shù)組常用19種方法,大家可以看看你會(huì)的到底有多少呢,在日常開(kāi)發(fā)中我們會(huì)接觸到j(luò)s中數(shù)組的一些方法,需要的朋友可以參考下2023-09-09
JavaScript?setTimeout和setInterval的用法與區(qū)別詳解
Javascript的setTimeOut和setInterval函數(shù)應(yīng)用非常廣泛,它們都用來(lái)處理延時(shí)和定時(shí)任務(wù),下面這篇文章主要給大家介紹了關(guān)于JavaScript?setTimeout和setInterval的用法與區(qū)別,需要的朋友可以參考下2022-04-04
關(guān)于axios返回空對(duì)象的問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于axios返回空對(duì)象的問(wèn)題解決方法，文中介紹的非常詳細(xì)，相信對(duì)大家學(xué)習(xí)或者使用axios具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
javascript 控制input只允許輸入的各種指定內(nèi)容
這篇文章主要介紹了通過(guò)javascript控制input只允許輸入的各種指定內(nèi)容,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了JS中的Map對(duì)象用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
使用JavaScript switch case 另類(lèi)寫(xiě)法
在JavaScript里，函數(shù)(todoA、todoB、todoC)就是對(duì)象，“()”的作用就是就是執(zhí)行函數(shù)對(duì)象，二者簡(jiǎn)單地組合一下就能夠讓代碼清晰簡(jiǎn)潔很多了，何樂(lè)不為呢？2010-03-03
這篇文章主要介紹了使用微信SDK自定義分享的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
js實(shí)現(xiàn)簡(jiǎn)單的省市縣三級(jí)聯(lián)動(dòng)效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的省市縣三級(jí)聯(lián)動(dòng)效果,以完整實(shí)例形式分析了JavaScript實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果的具體步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-02-02
js實(shí)現(xiàn)遮罩層劃出效果是生成div而不是顯示
單純的遮蓋層劃出是比較簡(jiǎn)單的，而本例介紹的這個(gè)就有點(diǎn)難度，生成div，而不是顯示存在的div，需要的朋友可以參考下2014-07-07
在JavaScript中驗(yàn)證URL的新方法(2023版)
在JavaScript領(lǐng)域,URL 驗(yàn)證方面有了新消息！多年來(lái),人們一直在討論JavaScript沒(méi)有一種簡(jiǎn)便的方法來(lái)驗(yàn)證 URL,現(xiàn)在有了一種新方法URL.canParse(),需要的朋友可以參考下2023-09-09