三种方式实现瀑布流布局
分别使用javascript，jquery，css实现瀑布流布局：
第一种方式：使用JavaScript：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="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:15px0015px;
}
.box.pic{
width:180px;
height:auto;
padding:10px;
border-radius:5px;
box-shadow:005px#cccccc;
border:1pxsolid#cccccc;
}
.box.picimg{
display:block;
width:100%;
}
</style>
</head>
<body>
<divclass="mainclearfix"id="main">
<divclass="box">
<divclass="pic"><imgsrc="./images/0.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/1.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/2.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/3.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/4.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/5.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/6.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/7.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/8.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/9.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/10.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/11.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/12.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/13.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/14.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/15.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/16.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/17.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/18.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/19.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/20.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/21.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/22.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/23.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/24.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/25.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/26.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/27.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/28.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/29.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/25.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/26.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/27.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/28.jpg"></div>
</div>
<divclass="box">
<divclass="pic"><imgsrc="./images/29.jpg"></div>
</div>
</div>
<script>
window.onload=function(){
waterfall('main','box');
//模拟json数据
vardataJson={'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(){
varisPosting=false;
if(checkScollSlide('main','box')&&!isPosting){
varoParent=document.getElementById('main');
for(variindataJson.data){
isPosting=true;
varoBox=document.createElement('div');
oBox.className='box';
oBox.innerHTML='<divclass="pic"><imgsrc="./images/'+dataJson.data[i].src+'"></div>';
oParent.appendChild(oBox);
}
isPosting=false;
waterfall('main','box');
}
}
}
/*
*parent父元素idclsName块元素类*/
functionwaterfall(parent,clsName){
//获取父元素
varoParent=document.getElementById(parent),
//获取所有box
aBoxArr=oParent.getElementsByClassName(clsName),
//单个box宽度
iBoxW=aBoxArr[0].offsetWidth,
//列数
cols=Math.floor(document.documentElement.clientWidth/iBoxW);
oParent.style.cssText='width:'+iBoxW*cols+'px;margin:0auto;';
//储存所有的高度
varhArr=[];
for(vari=0;i<aBoxArr.length;i++){
if(i<cols){
hArr[i]=aBoxArr[i].offsetHeight;
}else{
//获取hArr最小值
varminH=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;
}
}
}
//获取最小值索引
functiongetMinHIndex(arr,val){
for(variinarr){
if(arr[i]==val){
returni;
}
}
}
//检查是否满足加载数据条件,parent父元素idclsName块元素类
functioncheckScollSlide(parent,clsName){
varoParent=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;
returnlastBoxH<scrollTop+height?true:false;
}
</script>
</body>
</html>
第二种方式：使用jquery：(html结构跟css同上)
$(window).on("load",function(){
waterfall('main','box');
//模拟数据json
vardataJson={'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(){
varisPosting=false;
if(checkscrollside('main','box')&&!isPosting){
isPosting=true;
$.each(dataJson.data,function(index,dom){
var$box=$('<divclass="box"></div>');
$box.html('<divclass="pic"><imgsrc="./images/'+$(dom).attr('src')+'"></div>');
$('#main').append($box);
waterfall('main','box');
isPosting=false;
});
}
}
});
/*
parend父级id
clsName元素class
*/
functionwaterfall(parent,clsName){
var$parent=$('#'+parent);//父元素
var$boxs=$parent.find('.'+clsName);//所有box元素
variPinW=$boxs.eq(0).width()+15;//一个块框box的宽
varcols=Math.floor($(window).width()/iPinW);//列数
$parent.width(iPinW*cols).css({'margin':'0auto'});
varpinHArr=[];//用于存储每列中的所有块框相加的高度。
$boxs.each(function(index,dom){
if(index<cols){
pinHArr[index]=$(dom).height();//所有列的高度
}else{
varminH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
varminHIndex=$.inArray(minH,pinHArr);
$(dom).css({
'position':'absolute',
'top':minH+15,
'left':$boxs.eq(minHIndex).position().left
});
//添加元素后修改pinHArr
pinHArr[minHIndex]+=$(dom).height()+15;//更新添加了块框后的列高
}
});
}
//检验是否满足加载数据条件，即触发添加块框函数waterfall()的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
functioncheckscrollside(parent,clsName){
//最后一个块框
var$lastBox=$('#'+parent).find('.'+clsName).last(),
lastBoxH=$lastBox.offset().top+$lastBox.height()/2,
scrollTop=$(window).scrollTop(),
documentH=$(document).height();
returnlastBoxH<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:15px0015px;
}
.box.pic{
width:180px;
height:auto;
padding:10px;
border-radius:5px;
box-shadow:005px#cccccc;
border:1pxsolid#cccccc;
}
.box.picimg{
display:block;
width:100%;
}
瀑布流实现方式比较：
Javascript原生方式/jquery方式
1、需要计算，列数=浏览器窗口宽度/图片宽度，图片定位是根据每一列的高度计算下来图片的位置；
2、图片排序是按照图片计算的位置横向排列，位置是计算出来的，比较规范
Css方式
1、不需要计算，浏览器自动计算，只需设置列宽，性能高；
2、列宽随着浏览器窗口大小进行改变，用户体验不好；
3、图片排序按照垂直顺序排列，打乱图片显示顺序；
4、图片加载还是依靠javascript/jquery实现
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！