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