網(wǎng)頁瀑布流布局jQuery實現(xiàn)代碼

2019-11-20 08:41:36

字體：大中小

來源：轉載

供稿：網(wǎng)友

什么是瀑布流網(wǎng)頁布局？

瀑布流，又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當前尾部。

下面來看代碼，用純CSS3來做看效果怎樣！

HTML

<div id="all"><div class="box"><div class="pic"><img src="cars/1.jpg"/></div></div><div class="box"><div class="pic"><img src="cars/2.jpg"/></div></div><div class="box"><div class="pic"><img src="cars/3.jpg"/></div></div><div class="box"><div class="pic"><img src="cars/4.jpg"/></div></div><div class="box"><div class="pic"><img src="cars/5.jpg"/></div></div><div class="box"><div class="pic"><img src="cars/6.jpg"/></div></div><div class="box"><div class="pic"><img src="cars/7.jpg"/></div></div><div class="box"><div class="pic"><img src="cars/8.jpg"/></div></div><div class="box"><div class="pic"><img src="cars/9.jpg"/></div></div><div class="box"><div class="pic"><img src="cars/10.jpg"/></div></div><div class="box"><div class="pic"><img src="cars/11.jpg"/></div></div><div class="box"><div class="pic"><img src="cars/12.jpg"/></div></div></div>

這里用一個大盒子來裝全部內容，小盒子box裝塊內容，pic盒子裝圖片。看css的代碼

CSS

*{margin: 0;padding: 0;}#all{/*關鍵代碼*/-webkit-column-width: 437px;-moz-column-width: 437px;-o-column-width: 437px;-ms-column-width: 437px;/*-webkit-column-count: 3;-moz-column-count: 3;-o-column-count: 3;-ms-column-count: 3;*//*-webkit-column-rule: 2px dashed #F00;-moz-column-rule: 2px dashed #F00;-o-column-rule: 2px dashed #F00;-ms-column-rule: 2px dashed #F00;*//*-webkit-column-gap: 5px;-moz-column-gap: 5px;-o-column-gap: 5px;-ms-column-gap: 5px;*/}.box{padding: 15px 0 0 15px;}.pic{padding: 10px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc ;width: 400px;}.pic>img{width: 400px;height: auto;}

效果就出來了

可見CSS3雖然實現(xiàn)了瀑布流，但是畫風看起來詭異，左右排布間距不夠靈活。列寬隨著瀏覽器窗口大小進行改變，用戶體驗不好，圖片排序按照垂直順序排列，打亂圖片顯示順序，圖片加載還是依靠JavaScript來實現(xiàn)。唯一優(yōu)勢是不需要計算，瀏覽器自動計算，只需設置列寬，性能高。

為了得到更好的效果，所以我們還是用算法來實現(xiàn)吧，下面來看jquery代碼配合css來實現(xiàn)瀑布流。

CSS

*{margin: 0;padding: 0;}#all{position: relative;}.box{padding: 15px 0 0 15px;float: left;}.pic{padding: 10px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc ;}.pic>img{width: 400px;height: auto;}

jquery

$(window).load(function(){waterfall();// var dataInt={"data":[{"src":"cars/1.jpg"},{"src":"cars/2.jpg"},{"src":"cars/3.jpg"},{"src":"cars/4.jpg"}]}// $(window).scroll(function(){// if(checkScrollSlide){// $.each(dataInt.data,function(key,value){// var oBox=$("<div>").addClass("box").appendTo($("#all"));// var oPic=$("<div>").addClass("pic").appendTo($(oBox));// var oImg=$("<img>").attr("src",$(value).attr("src")).appendTo($(oPic));// })// waterfall();// }// })})function waterfall(){var $boxs=$("#all>div");var w=$boxs.eq(0).outerWidth();var cols=Math.floor($(window).width()/w);$('#all').width(w*cols).css("margin","0 auto");var hArr=[];$boxs.each(function(index,value){var h=$boxs.eq(index).outerHeight();if(index<cols){hArr[index]=h;}else{var minH=Math.min.apply(null,hArr);var minHIndex=$.inArray(minH,hArr);// console.log(minH);$(value).css({'position':'absolute','top':minH+'px','left':minHIndex*w+'px'})hArr[minHIndex]+=$boxs.eq(index).outerHeight();}});}//function checkScrollSlide(){// var $lastBox=$("#all>div").last();// var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);// var scrollTop=$(window).scrollTop();// var documentH=$(window).height();// return(lastBoxDis<scrollTop+documentH)?true:false;//}

效果如下