三種方式實(shí)現(xiàn)瀑布流布局
分別使用javascript,jquery,css實(shí)現(xiàn)瀑布流布局:
第一種方式:使用JavaScript:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> <style> *{padding:0;margin:0;} .clearfix:after, .clearfix:before { content: " "; display: table; } .clearfix:after { clear: both; } .main { position: relative; -webkit-column-width: 210px; -moz-column-width: 210px; -webkit-column-gap: 5px; -moz-column-gap: 5px; } .box { float: left; padding: 15px 0 0 15px; } .box .pic { width: 180px; height: auto; padding: 10px; border-radius: 5px; box-shadow: 0 0 5px #cccccc; border: 1px solid #cccccc; } .box .pic img { display: block; width: 100%; } </style> </head> <body> <div class="main clearfix" id="main"> <div class="box"> <div class="pic"><img src="./images/0.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/1.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/2.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/3.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/4.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/5.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/6.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/7.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/8.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/9.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/10.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/11.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/12.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/13.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/14.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/15.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/16.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/17.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/18.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/19.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/20.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/21.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/22.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/23.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/24.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/25.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/26.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/27.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/28.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/29.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/25.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/26.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/27.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/28.jpg"></div> </div> <div class="box"> <div class="pic"><img src="./images/29.jpg"></div> </div> </div> <script> window.onload = function(){ waterfall('main','box'); //模擬json數(shù)據(jù) var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]}; //監(jiān)聽scroll事件 window.onscroll = function(){ var isPosting = false; if(checkScollSlide('main','box') && !isPosting){ var oParent = document.getElementById('main'); for(var i in dataJson.data){ isPosting = true; var oBox = document.createElement('div'); oBox.className = 'box'; oBox.innerHTML = '<div class="pic"><img src="./images/'+dataJson.data[i].src+'"></div>'; oParent.appendChild(oBox); } isPosting = false; waterfall('main','box'); } } } /* * parent 父元素id clsName 塊元素類*/ function waterfall(parent,clsName){ //獲取父元素 var oParent = document.getElementById(parent), //獲取所有box aBoxArr = oParent.getElementsByClassName(clsName), //單個(gè)box寬度 iBoxW = aBoxArr[0].offsetWidth, // 列數(shù) cols = Math.floor(document.documentElement.clientWidth / iBoxW); oParent.style.cssText = 'width:'+iBoxW*cols+'px;margin:0 auto;'; //儲(chǔ)存所有的高度 var hArr = []; for(var i = 0; i < aBoxArr.length; i++){ if(i < cols){ hArr[i] = aBoxArr[i].offsetHeight; }else{ //獲取hArr最小值 var minH = Math.min.apply(null,hArr), // hArr最小值索引index minHIndex = getMinHIndex(hArr,minH); aBoxArr[i].style.cssText = 'position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;'; //添加元素之后更新hArr hArr[minHIndex] += aBoxArr[i].offsetHeight; } } } //獲取最小值索引 function getMinHIndex(arr,val){ for(var i in arr){ if(arr[i] == val){ return i; } } } //檢查是否滿足加載數(shù)據(jù)條件,parent 父元素id clsName 塊元素類 function checkScollSlide(parent,clsName){ var oParent = document.getElementById(parent), aBoxArr = oParent.getElementsByClassName(clsName), // 最后一個(gè)box元素的offsetTop+高度的一半 lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2, //兼容js標(biāo)準(zhǔn)模式和混雜模式 scrollTop = document.documentElement.scrollTop || document.body.scrollTop, height = document.documentElement.clientHeight || document.body.clientHeight; return lastBoxH < scrollTop + height ? true : false; } </script> </body> </html>
第二種方式:使用jquery:(html結(jié)構(gòu)跟css同上)
$( window ).on( "load", function(){ waterfall('main','box'); //模擬數(shù)據(jù)json var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]}; window.onscroll=function(){ var isPosting = false; if(checkscrollside('main','box') && !isPosting){ isPosting = true; $.each(dataJson.data,function(index,dom){ var $box = $('<div class="box"></div>'); $box.html('<div class="pic"><img src="./images/'+$(dom).attr('src')+'"></div>'); $('#main').append($box); waterfall('main','box'); isPosting = false; }); } } }); /* parend 父級(jí)id clsName 元素class */ function waterfall(parent,clsName){ var $parent = $('#'+parent);//父元素 var $boxs = $parent.find('.'+clsName);//所有box元素 var iPinW = $boxs.eq( 0 ).width()+15;// 一個(gè)塊框box的寬 var cols = Math.floor( $( window ).width() / iPinW );//列數(shù) $parent.width(iPinW * cols).css({'margin': '0 auto'}); var pinHArr=[];//用于存儲(chǔ) 每列中的所有塊框相加的高度。 $boxs.each( function( index, dom){ if( index < cols ){ pinHArr[ index ] = $(dom).height(); //所有列的高度 }else{ var minH = Math.min.apply( null, pinHArr );//數(shù)組pinHArr中的最小值minH var minHIndex = $.inArray( minH, pinHArr ); $(dom).css({ 'position': 'absolute', 'top': minH + 15, 'left': $boxs.eq( minHIndex ).position().left }); //添加元素后修改pinHArr pinHArr[ minHIndex ] += $(dom).height() + 15;//更新添加了塊框后的列高 } }); } //檢驗(yàn)是否滿足加載數(shù)據(jù)條件,即觸發(fā)添加塊框函數(shù)waterfall()的高度:最后一個(gè)塊框的距離網(wǎng)頁(yè)頂部+自身高的一半(實(shí)現(xiàn)未滾到底就開始加載) function checkscrollside(parent,clsName){ //最后一個(gè)塊框 var $lastBox = $('#'+parent).find('.'+clsName).last(), lastBoxH = $lastBox.offset().top + $lastBox.height()/ 2, scrollTop = $(window).scrollTop(), documentH = $(document).height(); return lastBoxH < scrollTop + documentH ? true : false; }
第三種方式:使用css:(html結(jié)構(gòu)同上)
.clearfix:after, .clearfix:before { content: " "; display: table; } .clearfix:after { clear: both; } .main { position: relative; [color=#ff0000]-webkit-column-width: 210px; -moz-column-width: 210px; -webkit-column-gap: 5px; -moz-column-gap: 5px;[/color] } .box { float: left; padding: 15px 0 0 15px; } .box .pic { width: 180px; height: auto; padding: 10px; border-radius: 5px; box-shadow: 0 0 5px #cccccc; border: 1px solid #cccccc; } .box .pic img { display: block; width: 100%; }
瀑布流實(shí)現(xiàn)方式比較:
Javascript原生方式/jquery方式
1、需要計(jì)算,列數(shù) = 瀏覽器窗口寬度/圖片寬度,圖片定位是根據(jù)每一列的高度計(jì)算下來(lái)圖片的位置;
2、圖片排序是按照?qǐng)D片計(jì)算的位置橫向排列,位置是計(jì)算出來(lái)的,比較規(guī)范
Css方式
1、不需要計(jì)算,瀏覽器自動(dòng)計(jì)算,只需設(shè)置列寬,性能高;
2、列寬隨著瀏覽器窗口大小進(jìn)行改變,用戶體驗(yàn)不好;
3、圖片排序按照垂直順序排列,打亂圖片顯示順序;
4、圖片加載還是依靠javascript/jquery實(shí)現(xiàn)
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
討論html與javascript在瀏覽器中的加載順序問(wèn)題
這篇文章主要是對(duì)html與javascript在瀏覽器中的加載順序問(wèn)題進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11JavaScript遞歸函數(shù)解“漢諾塔”算法代碼解析
這篇文章主要介紹了JavaScript遞歸函數(shù)解“漢諾塔”算法代碼解析,需要的朋友可以參考下2018-07-07JavaScript動(dòng)態(tài)加載樣式表的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)加載樣式表的方法,涉及javascript操作樣式表的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03動(dòng)態(tài)改變div的z-index屬性的簡(jiǎn)單實(shí)例
這篇文章介紹了動(dòng)態(tài)改變div的z-index屬性的簡(jiǎn)單實(shí)例,有需要的朋友可以參考一下2013-08-08js對(duì)象數(shù)組和對(duì)象的使用實(shí)例詳解
在本篇文章里小編給大家整理了關(guān)于js對(duì)象數(shù)組和對(duì)象的使用實(shí)例相關(guān)知識(shí)點(diǎn),有需要的朋友們學(xué)習(xí)下。2019-08-08