這篇文章主要介紹了JS如何實(shí)現(xiàn)瀑布流布局,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)專(zhuān)注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站建設(shè)、成都做網(wǎng)站、余杭網(wǎng)絡(luò)推廣、重慶小程序開(kāi)發(fā)、余杭網(wǎng)絡(luò)營(yíng)銷(xiāo)、余杭企業(yè)策劃、余杭品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等,從售前售中售后,我們都將竭誠(chéng)為您服務(wù),您的肯定,是我們最大的嘉獎(jiǎng);成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供余杭建站搭建服務(wù),24小時(shí)服務(wù)熱線:18980820575,官方網(wǎng)址:www.cdcxhl.com
1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫(xiě)HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
具體內(nèi)容如下
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;iheight?true:false; }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“JS如何實(shí)現(xiàn)瀑布流布局”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!