仿360图集效果的制作

最新推荐文章于 2021-02-25 15:07:22 发布

Richard_Jason

最新推荐文章于 2021-02-25 15:07:22 发布

阅读量677

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Richard_Jason/article/details/45845981

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<title>标题</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="描述">

<style type="text/css">
*{margin:0px; padding:0px;}
/*左侧导航*/
#Logo{width:150px; background:#41434f;padding-bottom:60px;position:fixed;}
#Logo h1{height:20px;background:#4e505b;border-bottom:1px solid #32333e; padding-left:15px; padding:14px 0px 14px 22px;}
#Logo ul li{line-height:40px;border-top:1px solid #4e505f;
list-style-type:none; border-bottom:1px solid #32333e;}
#Logo ul li a{color:#b3b3b3;text-decoration:none; display:block; padding-left:15px;
font-family:"微软雅黑";}
#Logo ul li a:hover{background:#33343f; color:#fff;}
/*右侧图片集*/
img{display:block;}
.wf-main{position: relative;width:1100px;overflow: hidden; float:right;}
.wf-main .wf-cld{ position: absolute;margin-bottom:10px;line-height:18px;width:238px;left: -9999px;top: -9999px;border: 1px solid #ccc;
border-radius: 4px;overflow: hidden;}
.wf-cld .inner{ position: absolute;left: -9999px;top: -9999px;margin-bottom: 5px;width: 73px;overflow: hidden;border: 1px solid #f00;border-radius: 3px;}
.wf-cld .title{margin: 0 0 5px;padding: 5px;width: 63px;color: #f00;font-size: 14px;}

</style>
</head>
<body>
<div id="Logo">
<h1 class="logo"><a href="/"><img src="images/1.png" /></a></h1>
<ul>
<li><a href="">图说世界</a></li>
<li><a href="">美女秀场</a></li>
<li><a href="">壁纸</a></li>
<li><a href="">宠物</a></li>
<li><a href="">酷车</a></li>
<li><a href="">家居</a></li>
<li><a href="">艺术</a></li>
<li><a href="">摄影</a></li>
<li><a href="">美食</a></li>
<li><a href="">旅游</a></li>
<li><a href="">笑话</a></li>
<li><a href="">设计</a></li>
<li><a href="">奢华</a></li>
</ul>
</div>

<div class="wf-main" id="wf-main">
<div class="wf-cld"><img src="images/1.jpg" /></div>
<div class="wf-cld"><img src="images/2.jpg" /></div>
<div class="wf-cld"><img src="images/3.jpg" /></div>
<div class="wf-cld"><img src="images/4.jpg" /></div>
<div class="wf-cld"><img src="images/5.jpg" /></div>
<div class="wf-cld"><img src="images/6.jpg" /></div>
<div class="wf-cld"><img src="images/7.jpg" /></div>
<div class="wf-cld"><img src="images/8.jpg" /></div>
<div class="wf-cld"><img src="images/9.jpg" /></div>
<div class="wf-cld"><img src="images/10.jpg" /></div>
<div class="wf-cld"><img src="images/11.jpg" /></div>
<div class="wf-cld"><img src="images/12.jpg" /></div>
<div class="wf-cld"><img src="images/9.jpg" /></div>
<div class="wf-cld"><img src="images/10.jpg" /></div>
<div class="wf-cld"><img src="images/11.jpg" /></div>
<div class="wf-cld"><img src="images/12.jpg" /></div>
<div class="wf-cld"><img src="images/10.jpg" /></div>
<div class="wf-cld"><img src="images/11.jpg" /></div>
<div class="wf-cld"><img src="images/12.jpg" /></div>
<div class="wf-cld"><img src="images/10.jpg" /></div>
<div class="wf-cld"><img src="images/11.jpg" /></div>
<div class="wf-cld"><img src="images/12.jpg" /></div>

</div>

<script type="text/javascript" src="js/show_ads.js"></script>
<script type="text/javascript">
function Waterfall(param){
this.id = typeof param.container == 'string' ? document.getElementById(param.container) : param.container;
this.colWidth = param.colWidth;
this.colCount = param.colCount || 4;
this.cls = param.cls && param.cls != '' ? param.cls : 'wf-cld';
this.init();
}
Waterfall.prototype = {
getByClass:function(cls,p){
var arr = [],reg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)","g");
var nodes = p.getElementsByTagName("*"),len = nodes.length;
for(var i = 0; i < len; i++){
if(reg.test(nodes[i].className)){
arr.push(nodes[i]);
reg.lastIndex = 0;
}
}
return arr;
},
maxArr:function(arr){
var len = arr.length,temp = arr[0];
for(var ii= 1; ii < len; ii++){
if(temp < arr[ii]){
temp = arr[ii];
}
}
return temp;
},
getMar:function(node){
var dis = 0;
if(node.currentStyle){
dis = parseInt(node.currentStyle.marginBottom);
}else if(document.defaultView){
dis = parseInt(document.defaultView.getComputedStyle(node,null).marginBottom);
}
return dis;
},
getMinCol:function(arr){
var ca = arr,cl = ca.length,temp = ca[0],minc = 0;
for(var ci = 0; ci < cl; ci++){
if(temp > ca[ci]){
temp = ca[ci];
minc = ci;
}
}
return minc;
},
init:function(){
var _this = this;
var col = [],//列高
iArr = [];//索引
var nodes = _this.getByClass(_this.cls,_this.id),len = nodes.length;
for(var i = 0; i < _this.colCount; i++){
col[i] = 0;
}
for(var i = 0; i < len; i++){
nodes[i].h = nodes[i].offsetHeight + _this.getMar(nodes[i]);
iArr[i] = i;
}

for(var i = 0; i < len; i++){
var ming = _this.getMinCol(col);
nodes[i].style.left = ming * _this.colWidth + "px";
nodes[i].style.top = col[ming] + "px";
col[ming] += nodes[i].h;
}

_this.id.style.height = _this.maxArr(col) + "px";
}
};

new Waterfall({
"container":"wf-main",
"colWidth":256,
"colCount":4
});
</script>

</body>
</html>