JS實現(xiàn)瀑布流布局
本文實例為大家分享了JS實現(xiàn)瀑布流布局展示的具體代碼,供大家參考,具體內(nèi)容如下
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> <script src="wallpoll.js"></script> <link rel="stylesheet" href="wallpoll.css" rel="external nofollow" > </head> <body> <div id="main"> <div class="box"> <div class="pic"> <img src="wallpoll/0.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/0.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/1.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/2.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/3.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/4.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/5.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/6.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/7.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/8.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/9.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/10.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/11.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/12.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/13.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/14.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/15.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/16.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/17.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/18.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/19.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/20.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/21.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/22.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/23.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="wallpoll/24.jpg" alt=""> </div> </div> </div> </body> </html>
css部分
*{ padding:0px; margin:0px; } .main{ position:relative; } .box{ padding:15px 0 0 10px; float:left; } .pic{ padding:10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; /*float:left;*/ } img{ width:170px; height:auto; }
JS部分
window.onload=function(){ waterfall('main','box'); var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]} window.onscroll=function(){ if(checkScrollSlide){ for(var i=0;i<dataInt.data.length;i++){ var oparent=document.getElementById("main"); var box=document.createElement("div"); box.className="box"; oparent.appendChild(box); var pic=document.createElement("div"); pic.className="pic"; box.appendChild(pic); var img=document.createElement("img"); img.src="wallpoll/"+dataInt.data[i].src; pic.appendChild(img); } } waterfall('main','box'); } } function waterfall(parent,child){ var oparent=document.getElementById(parent); var boxs=oparent.getElementsByClassName(child); var boxw=boxs[0].offsetWidth; var cols=Math.floor(document.documentElement.clientWidth/boxw); oparent.style.cssText="width:"+cols*boxw+"px;margin:0 auto"; var harr=new Array(); for(var i=0;i<boxs.length;i++){ if(i<cols){ harr.push(boxs[i].offsetHeight); }else{ var minH=Math.min.apply(null,harr); var index=getMinhIndex(harr,minH); boxs[i].style.position="absolute"; boxs[i].style.top=minH+"px"; boxs[i].style.left=boxs[index].offsetLeft+"px"; harr[index]+=boxs[i].offsetHeight; } } } function getMinhIndex(arr,val){ for(var i in arr){ if(arr[i]===val){ return i; } } } function checkScrollSlide(){ var oparent=document.getElementById("main"); var boxs=oparent.getElementsByClassName("box"); var lastBox=boxs[boxs.length-1]; var height=lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2); var scrollHeigth=document.documentElement.scrollTop || document.body.scrollTop; // console.log(scrollHeigth); var seeHeigth=document.documentElement.clientHeigth || document.body.clientHeigth; return seeHeigth+scrollHeigth>height?true:false; }
課程地址。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Uniapp自定義導(dǎo)航欄并自適應(yīng)機型的實現(xiàn)方法
Uniapp 是一款跨平臺開發(fā)框架,可以同時開發(fā)出可以在多個平臺上運行的應(yīng)用,在開發(fā)過程中,我們常常需要自定義導(dǎo)航欄來滿足 UI 設(shè)計的需求,本文將介紹如何在 Uniapp 中自定義導(dǎo)航欄并自適應(yīng)不同機型的屏幕大小,需要的朋友可以參考下2023-09-09js設(shè)計模式之結(jié)構(gòu)型享元模式詳解
這篇文章主要為大家詳細介紹了js設(shè)計模式之結(jié)構(gòu)型享元模式的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09js實現(xiàn)網(wǎng)頁標題欄閃爍提示效果實例分析
這篇文章主要介紹了js實現(xiàn)網(wǎng)頁標題欄閃爍提示效果的方法,以實例形式分析了網(wǎng)上比較常見的實現(xiàn)方法,并對于原理進行分析并加以改進,最后給出了一個具體的應(yīng)用實例供大家參考,需要的朋友可以參考下2014-11-11Javascript 實現(xiàn)廣告后加載 可加載百度谷歌聯(lián)盟廣告
本文主要介紹一種新的廣告后加載的方式,支持自定義HTML廣告、百度聯(lián)盟廣告和谷歌聯(lián)盟廣告。這種方式在頁面加載完成后執(zhí)行,不影響內(nèi)容的顯示,對用戶更加友好。2016-05-05onsubmit阻止form表單提交與onclick的相關(guān)操作
return false會阻止表單提交,基本上關(guān)于onsubmit=return false有以下幾點要注意的地方,學(xué)習(xí)后臺編程的朋友一定要知道。2010-09-09JavaScript函數(shù)式編程(Functional Programming)高階函數(shù)(Higher order fun
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)高階函數(shù)(Higher order functions),結(jié)合實例形式分析了javascript函數(shù)式編程高級函數(shù)的概念、原理、用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-05-05js window.onload 加載多個函數(shù)的方法
平時做項目 經(jīng)常需要使用window.onload,但window.onload 不能同時加載多個函數(shù)。2009-11-11