发布于 2015-06-06 02:08:26 | 127 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程,程序狗速度看过来!
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
示例代码:
$(document).ready(function(){
/*
* <div class="layoutContainer" style="position:relative">
* <div class="news-list" style="position:absolute"></div>
* <div class="news-list" style="position:absolute"></div>
* </div>
* 首先,定义变量
* cwidth:容器宽度
* dwidth:div宽度
* num:div个数
* 获取每行的数量:m
* 每个div之间的间隔:lwidth
* 每个div上下之间的间隔:mheight
* 分别获取各个 left,集合:left;
* 记录各个列的高度,数组array:lheight
* 记录div总高度。mainheight
* 函数:
* getHeight():返回高度最短的列数
*
* */
cwidth=$(".layoutContainer").width();
dwidth=$(".news-list").width();
num=$(".news-list").length;
m= Math.floor(cwidth/dwidth);
lwidth=(cwidth-dwidth*m)/(m-1);
mheight=15;
mainheight=0;
var lheight=new Array();
for(u=0;u<m;u++){
lheight[u]=0;
}
function getHeight(){
lr=0; //第几列 0,1,2,3,4...
lh=lheight[0];
for(i=0;i<m;i++){
if(lheight[i]<lh){
lr=i;
lh=lheight[i];
}
}
return lr;
}
function setAddr(n){
x=getHeight(); //这个可以得知,div css.left=(lwidth+dwidth)*x
div=$(".news-list").eq(n);
xleft=(lwidth+dwidth)*x;
// console.log(xleft);
xtop=lheight[x]+mheight;
// console.log(xtop);
lheight[x]=xtop+div.innerHeight()+15;
// console.log(div.outerHeight());
mainheight=lheight[x]>mainheight?lheight[x]:mainheight;
div.css({"left":xleft+"px","top":xtop+"px"});
$(".layoutContainer").height(mainheight);
}
window.onload=function(){
for(j=0;j<num;j++){
setAddr(j);
}
}
});
思路:首先,判断当前容器能够排几列-->m
判断当前页面每个div之间的距离-->lwidth
设定数组,几列各个列数现在的高度-->lheight
随时记录当前页面的高度-->mainheight
从第一个内部div开始设置位置-->setAddr()-->
getHeight():返回高度最短的列数 -->计算出这个div的left: xleft=(lwidth+dwidth)*x;
-->计算出这个div的top: xtop=lheight[x]+mheight; -->更新高度,mainheight -->更新这行的高度:lheight[x]