您的位置：首页 > Web前端 > JavaScript

瀑布流布局javascript or css3实现

2016-12-12 11:11 344 查看

javascript实现瀑布流布局：

效果图：



是不是觉得很厉害列！以前蘑菇街和美丽说就是用这种布局，容易让用户沉浸在里面，

思路：

每个图片设置一个盒子，每个盒子的position都是absolute，先摆放第一行的盒子，计算出高度最低的一列，往上面加



然后继续寻找高度最低的，填上去



怎么寻找到最短的一列呢，根据第一行的个数初始化数组，将他们的高度存储到数组里面，然后很容易就找到最小的，在填盒子上去（用绝对定位，left和它上面的一样，top就是上面盒子高度）填上去之后，数组这个值加上添加盒子的高度，然后继续寻找最小的。听不懂的话我建议你多看源码学习下我的代码。。。额。好吧我编不下。。去看看源码吧



源码：

waterfallLayout.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pubuliu</title>
<script type="text/javascript" src="js/test.js"></script>
<style type="text/css">
.box img{
height: auto;
width: 162px;
}
*{
margin: 0;
padding: 0;
}
.box{
border: 1px solid #ccc;
padding: 10px;
border-radius: 6px;
box-shadow: 0 0 6px #ccc;
}
.pin{
padding: 15px 0 0 15px;
float: left;
}
#main{
position: relative;
}
</style>

</head>

<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="./images/1.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/3.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/5.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/6.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/7.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/8.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/9.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/10.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/11.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/12.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/13.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/14.jpg"/>
</div>
</div>
<div class="pin">
e440

<div class="box">
<img src="./images/15.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/16.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/17.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/18.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/19.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/20.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/21.jpg"/>
</div>
</div>

</div>
</body>
</html>


waterfall.js:

/****
*通过父级和子元素的class类 获取该同类子元素的数组
*/
function getClassObj(parent,className){
var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
var pinS=[];//创建一个数组 用于收集子元素
for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组
if (obj[i].className==className){
pinS.push(obj[i]);
}
};
return pinS;
}

/****
*获取 pin高度 最小值的索引index
*/
function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH){
return i;
}
}
}

window.onload=function(){

waterfall('main','pin');
//滚动加载数据源
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
//滚动加载
window.onscroll=function(){
if(checkoutScroll()){
var oParent=document.getElementById('main');
for(var i=0; i<dataInt.data.length; i++){
var oPin=document.createElement('div'); //添加 元素节点
oPin.className='pin';                   //添加 类名 name属性
oParent.appendChild(oPin);              //添加 子节点
var oBox=document.createElement('div');
oBox.className='box';
oPin.appendChild(oBox);
var oImg=document.createElement('img');
oImg.src='images/'+dataInt.data[i].src;
oBox.appendChild(oImg);

}
waterfall('main','pin');
}
}
}

//检查是否滚动到需要加载的位置
function checkoutScroll(){
var oParent=document.getElementById('main');
var aPin=getClassObj(oParent,"pin");
var lastH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2); //最后一个框的top加height/2
var scrollH=document.documentElement.scrollTop||document.body.scrollTop;//兼容ie傻逼
var documentH=document.documentElement.clientHeight;//页面高度
return (lastH<scrollH+documentH)?true:false;
}

//瀑布流
function waterfall(parent, pin){
var oParent=document.getElementById(parent);
var aPin=getClassObj(oParent,pin);
//alert(aPin.length);
var iPinW=aPin[0].offsetWidth;//一个框的宽
var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行有多少个框
console.log("num:"+num);
oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//设置父级居中样式：定宽+自动水平外边距

var pinHArr=[];
for(var i=0; i<aPin.length; i++){
var pinH=aPin[i].offsetHeight;
if(i<num){
pinHArr[i]=pinH
}else{
var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
var minHIndex=getminHIndex(pinHArr,minH);
console.log("minHIndex:"+minHIndex);
aPin[i].style.position='absolute';//设置绝对位移
aPin[i].style.top=minH+"px";
aPin[i].style.left=aPin[minHIndex].offsetLeft+"px";
pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
}

}

}


CSS3实现瀑布流布局

当然如果你真的这样写了，你会发现你傻逼了，因为css3有个属性很简单就做了



waterfall.css:

#main{
-webkit-column-width:202px;//每一列的宽度
-moz-column-width:202px;//火狐
-o-column-width:202px;//chrome
-ms-column-width:202px;//ie
}
.box{
}
.pin{padding:10px 10px 10px 10px;
border:1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
width: 165px;}

.pin img{display: block;
width: 165px;
height: auto;}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 蘑菇街 瀑布流 布局 css3
相关文章推荐
新的分享
章节导航