最近在慕课网上听如何实现瀑布流的效果：介绍了3种方法。
1.纯JS代码实现：
HTML代码部分：
<!DOCTYPE html> <html> <head> <title>watefall layout</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="js/waterfall.js"></script> </head> <body> <div 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/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/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> </body> </html>
*{ margin: 0;padding:0; } #main{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: 165px;}
window.onload=function(){ waterfall('main','box'); var dataInt={"data":[{"src":'30.jpg'},{"src":'31.jpg'},{"src":'32.jpg'},{"src":'33.jpg'},{"src":'34.jpg'}]}; window.onscroll=function(){ if(checkScrollSlide()){ var oParent=document.getElementById('main'); // 将数据块渲染到当前页面的尾部 for(var i=0;i<dataInt.data.length;i++){ var oBox=document.createElement('div'); oBox.className='box'; oParent.appendChild(oBox); var oPic=document.createElement('div'); oPic.className="pic"; oBox.appendChild(oPic); var oImg=document.createElement('img'); oImg.src="images/"+dataInt.data[i].src; oPic.appendChild(oImg); } waterfall('main','box'); } // checkScrollSlide(); } } function waterfall(parent,box){ //将main下的所有class为box的元素取出来 var oParent=document.getElementById(parent); var oBoxs=getByClass(oParent,box); // console.log(oBoxs.length); //计算整个页面显示的列数（页面宽度/box的宽度)x.offsetWidth获取一个div的宽度，document.documentElement.clientWidth获取页面的宽度 var oBoxW=oBoxs[0].offsetWidth; var cols= Math.floor(document.documentElement.clientWidth/oBoxW); // console.log(cols); //设置main的宽度 oParent.style.cssText=''+oBoxW*cols+'px;margin:auto'; var hArr=[]; //存放每一行图片高度的数组 for (var i=0;i<oBoxs.length;i++){ if(i<cols){ hArr.push(oBoxs[i].offsetHeight); }else{ var minH=Math.min.apply(null,hArr); var minindex=getMinhIndex(hArr,minH); oBoxs[i].style.position='absolute'; oBoxs[i].style.top=minH+'px'; //获取盒子的left值 oBoxs[i].style.left=oBoxs[minindex].offsetLeft+'px'; // oBoxs[i].style.left=oBoxW*minindex+'px'; hArr[minindex]+=oBoxs[i].offsetHeight; } } // console.log(hArr); } //根据class获取元素 function getByClass(parent,clsName){ var boxArr=new Array(),//用来存储class为box的所有元素 oElements=parent.getElementsByTagName('*'); for(var i=0;i<oElements.length;i++){ if (oElements[i].className==clsName) { boxArr.push(oElements[i]); } } return boxArr; } //获取高度为最小值在数组中的索引 function getMinhIndex(arr,val){ for (var i in arr) { if (arr[i]==val) { return i; } } } //检测是否具备了滚动条加载数据库的条件 function checkScrollSlide() { var oParent=document.getElementById('main'); var oBoxs=getByClass(oParent,'box'); var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2); var scrollTop=document.body.scrollTop||document.documentElement.scrollTop; // console.log(scrollTop); var height=document.body.clientHeight||document.documentElement.clientHeight; return (lastBoxH<scrollTop+height)?true:false; }
2.其他的不用动，只用替换js代码为jquery代码即可
$(window).on('load',function(){
waterfall();
var dataInt={"data":[{"src":'30.jpg'},{"src":'31.jpg'},{"src":'32.jpg'},{"src":'33.jpg'},{"src":'34.jpg'}]};
$(window).on('scroll',function(){
if(checkScrollSlide){
$.each(dataInt.data,function(key,value){
// console.log(key);
// console.log($(value).attr('src'));
var oBox =$('<div>').addClass('box').appendTo($('#main'));
var oPic=$('<div>').addClass('pic').appendTo($(oBox));
var oImg=$('<img>').attr('src','images/'+$(value).attr('src'));
oImg.appendTo($(oPic));
})
waterfall();
}
})
})
function waterfall(){
var oboxs=$('#main>div');
var w=oboxs.eq(0).outerWidth();
var cols=Math.floor($(window).width()/w);
$('#main').width(w*cols).css('margin','0 auto');
// console.log(w);
var hArr=[];
oboxs.each(function(index,value){
// console.log(index);
// console.log(value);
var h=oboxs.eq(index).outerHeight();//获取第一行的图片的高度
if(index<cols){
hArr[index]=h;//把前cols列的高度放在hArr数组中
}else{
var minH=Math.min.apply(null,hArr);
var minHIndex=$.inArray(minH,hArr);//求出minH在hArr中的索引值
// 把value的dom对象转换成jquery对象
$(value).css({
'position':'absolute',
'top':minH+'px',
'left':minHIndex*w+'px'
})
hArr[minHIndex]+=oboxs.eq(index).outerHeight();
}
})
}
function checkScrollSlide(){
var lastBox=$('#main>div').last();
var lastBoxDis=lastBox.offset().top+Math.floor(lastBox.outerHeight()/2);
var scollTop=$(window).scrollTop;
var documentH=$(window).height;
return (lastBoxDis<scrollTop+documentH)?true:false;
}
3.使用CSS3的多栏布局可以实现把图片平铺到桌面上，并结合js加载图片，监测鼠标滑动的，进行图片的加载
#main{ -webkit-column-width:202px; /*每一列的列宽*/ -moz-column-width:202px; -webkit-column-gap:5px; -moz-column-gap:5px; } /*数据块 砖块*/ .box{padding:10px 0 0 15px;} .pic{width:165px; margin:10px 0;border:1px solid #ccc; border-radius: 5px;padding:10px;box-shadow: 0 0 5px #ccc} .pic img{width:165px;display: block;}
使用CSS3实现瀑布流，性能好，但是用户体验不好，需要结合JS代码实现拖动滚动条加载的功能。