分別使用javascript，jquery，css實現瀑布流布局：
第一種方式：使用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數據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'}]};//監聽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),//獲取所有boxaBoxArr = oParent.getElementsByClassName(clsName),//單個box寬度iBoxW = aBoxArr[0].offsetWidth,// 列數cols = Math.floor(document.documentElement.clientWidth / iBoxW);oParent.style.cssText = 'width:'+iBoxW*cols+'px;margin:0 auto;';//儲存所有的高度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最小值索引indexminHIndex = getMinHIndex(hArr,minH);aBoxArr[i].style.cssText = 'position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;';//添加元素之后更新hArrhArr[minHIndex] += aBoxArr[i].offsetHeight;}}}//獲取最小值索引function getMinHIndex(arr,val){for(var i in arr){if(arr[i] == val){return i;}}}//檢查是否滿足加載數據條件,parent 父元素id clsName 塊元素類function checkScollSlide(parent,clsName){var oParent = document.getElementById(parent),aBoxArr = oParent.getElementsByClassName(clsName),// 最后一個box元素的offsetTop+高度的一半lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2,//兼容js標準模式和混雜模式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結構跟css同上)
$( window ).on( "load", function(){ waterfall('main','box'); //模擬數據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 父級id clsName 元素class */function waterfall(parent,clsName){ var $parent = $('#'+parent);//父元素 var $boxs = $parent.find('.'+clsName);//所有box元素 var iPinW = $boxs.eq( 0 ).width()+15;// 一個塊框box的寬 var cols = Math.floor( $( window ).width() / iPinW );//列數 $parent.width(iPinW * cols).css({'margin': '0 auto'}); var pinHArr=[];//用于存儲 每列中的所有塊框相加的高度。 $boxs.each( function( index, dom){ if( index < cols ){ pinHArr[ index ] = $(dom).height(); //所有列的高度 }else{ var minH = Math.min.apply( null, pinHArr );//數組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;//更新添加了塊框后的列高 } });}//檢驗是否滿足加載數據條件，即觸發添加塊框函數waterfall()的高度：最后一個塊框的距離網頁頂部+自身高的一半(實現未滾到底就開始加載)function checkscrollside(parent,clsName){ //最后一個塊框 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結構同上)
.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%;}瀑布流實現方式比較：
Javascript原生方式/jquery方式
1、需要計算，列數 = 瀏覽器窗口寬度/圖片寬度，圖片定位是根據每一列的高度計算下來圖片的位置；
2、圖片排序是按照圖片計算的位置橫向排列，位置是計算出來的，比較規范
Css方式
1、不需要計算，瀏覽器自動計算，只需設置列寬，性能高；
2、列寬隨著瀏覽器窗口大小進行改變，用戶體驗不好；
3、圖片排序按照垂直順序排列，打亂圖片顯示順序；
4、圖片加載還是依靠javascript/jquery實現
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持VeVb武林網！
新聞熱點
疑難解答
