发布于 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]

 


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务