快捷導(dǎo)航

原生js實(shí)現(xiàn)瀑布流效果

更新時(shí)間：2020年03月09日 10:20:29 作者：Tangerine.

這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡(jiǎn)單瀑布流效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)瀑布流效果的具體代碼，供大家參考，具體內(nèi)容如下

CSS樣式：

<style>
 .cont{margin: 0 auto;position: relative;}
 .box{float: left;padding: 5px;}
 .imgbox{border: black solid 1px;padding: 5px;border-radius: 5px;}
 .imgbox img{width: 200px;display: block;}
</style>

HTML結(jié)構(gòu):

<div class="cont">

 <div class="box">
 <div class="imgbox">
 <img src="img/1.jpg" >
 </div>
 </div>
 //......此處省略雷同代碼
 <div class="box">
 <div class="imgbox">
 <img src="img/2.jpg" >
 </div>
 </div>
 
</div>

JavaScript代碼：

<script>
 onload = function(){
 var wf = new WaterF();
 wf.init();
 }
 class WaterF{
 constructor(){
 this.clientW = document.documentElement.clientWidth;
 this.abox = document.querySelectorAll(".box");
 this.cont = document.querySelector(".cont");
 }
 init(){
 this.maxNum = parseInt(this.clientW / this.abox[0].offsetWidth);
 this.cont.style.width = this.maxNum * this.abox[0].offsetWidth + "px";

 this.firstLine();
 this.otherLine();
 }
 firstLine(){
 this.heightArr = [];
 for(var i=0;i<this.maxNum;i++){
 this.heightArr.push(this.abox[i].offsetHeight);
 }
 }
 otherLine(){
 for(var i=this.maxNum;i<this.abox.length;i++){
 var min = Math.min(...this.heightArr);
 var minIndex = this.heightArr.indexOf(min);
 this.abox[i].style.position = "absolute";
 this.abox[i].style.top = min + "px";
 this.abox[i].style.left = minIndex * this.abox[0].offsetWidth + "px";
 this.heightArr[minIndex] = this.heightArr[minIndex] + this.abox[i].offsetHeight;
 }
 }
 }
</script>

小編還為大家準(zhǔn)備了精彩的專題：瀑布流布局匯總

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
瀑布流

相關(guān)文章

詳解template標(biāo)簽用法(含vue中的用法總結(jié))
這篇文章主要介紹了template標(biāo)簽用法(含vue中的用法總結(jié))，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2021-01-01
基于jquery實(shí)現(xiàn)全屏滾動(dòng)效果
相信大家都很喜歡網(wǎng)易郵箱、QQ瀏覽器的官方網(wǎng)站這樣的可全屏滾動(dòng)的效果，也許更多的朋友想把全屏滾動(dòng)效果做到自己的網(wǎng)站中，本文就帶著大家一起完成這個(gè)效果
2015-11-11
JS 對(duì)象(Object)和字符串(String)互轉(zhuǎn)方法
下面小編就為大家?guī)?lái)一篇JS 對(duì)象(Object)和字符串(String)互轉(zhuǎn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-05-05
情人節(jié)之禮 js項(xiàng)鏈效果
情人節(jié)馬上要到了，為情人節(jié)奉獻(xiàn)一份禮物哈。。。一定要支持CSS3渲染的瀏覽器
2012-02-02
微信端調(diào)取相冊(cè)和攝像頭功能，實(shí)現(xiàn)圖片上傳，并上傳到服務(wù)器
這篇文章主要介紹了微信端調(diào)取相冊(cè)和攝像頭功能圖片上傳服務(wù)器，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
詳解JS如何使用Promise緩存網(wǎng)絡(luò)請(qǐng)求
網(wǎng)絡(luò)請(qǐng)求是現(xiàn)代Web應(yīng)用中的常見操作,很多時(shí)候需要獲取服務(wù)器上的數(shù)據(jù),在進(jìn)行網(wǎng)絡(luò)請(qǐng)求時(shí),為了減輕服務(wù)器的壓力,緩存策略常被用來(lái)避免對(duì)同一數(shù)據(jù)的重復(fù)請(qǐng)求,本文將探討如何使用Promise結(jié)合緩存來(lái)高效處理網(wǎng)絡(luò)請(qǐng)求,需要的朋友可以參考下
2023-12-12
JavaScript字符串分割處理的方法總結(jié)
這篇文章主要介紹了JavaScript字符串分割處理的幾種方法，js截取重要的三要素substring()、subsstr()、slice()，下面文章圍繞這三要素展開全文，需要的小伙伴可以參考一下
2022-03-03
JavaScript this在函數(shù)中的指向及實(shí)例詳解
這篇文章主要介紹了JavaScript this在函數(shù)中的指向及實(shí)例詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
JS庫(kù)particles.js創(chuàng)建超炫背景粒子插件(附源碼下載)
particles.js用于創(chuàng)建粒子的輕量級(jí) JavaScript 庫(kù)。使用方法非常簡(jiǎn)單，代碼也很容易實(shí)現(xiàn)，下面通過本文給大家分享JS庫(kù)particles.js創(chuàng)建超炫背景粒子插件附源碼下載，需要的朋友參考下吧
2017-09-09
用javascript修復(fù)瀏覽器中頭痛問題的方法整理篇[譯]
我們提倡無(wú)論何時(shí)都盡可能地使用CSS,這樣我們更容易取得成功.現(xiàn)在瀏覽器對(duì)CSS的支持已經(jīng)非常好,肯定足以讓你用來(lái)控制你的網(wǎng)頁(yè)布局與排版.但,即使如此,還是有某些頁(yè)面元素會(huì)在不同的瀏覽器下表現(xiàn)也不一樣.
2008-11-11