一个有趣的JS数组，

啥也不说，直接上源码吧，需要jquery，朋友们自行准备<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.4.2.min.js"></script>
<script>
/*程序主要实现相等宽度，不定高度的块的排列问题。大意如下示意图所示
主要是将每列中的块上下之间看起来连接起来。
注：其实这个问题目前还没发现有实际意义，但只作为兴趣研究。
 __   __   __
|  | |  | |  |
|  | |__| |  |
|__|  __  |  |
 __  |  | |__|
|  | |  |  __
|__| |  | |  |
     |__| |__|
*/
function paixu(L)//L表示几列，作为参数传入
{
var H=0;//行数
var z=$("#a li").length;//计算出块总数
var yu=$("#a li").length%L;//计算是否有余数
var array1=new Array();//定义一个数组

//确定有几行
if(yu==0)
{
H=$("#a li").length/L;
}
else
{
H=$("#a li").length/L+1;
}
//计算每个块的高度，并将存入二维数组中
var pp=0;  
for(m=0;m<H;m++)
{
for(n=0;n<L;n++)
{

if(pp<=z)
{
array1[m,n]=$("#a li").eq(pp).height();//可以alert此处查看array1的各个值
}
pp++;
}
}
//以下主要实现，每列距上面的高度为此列中，此行以上的高度和，并排为规定的L列，要求为顺序排列
var oo=0;
var hei=0;
var wid=0;
for(i=0;i<H;i++)
{
for(j=0;j<L;j++)
{
hei=0;
if(i*j-yu>=0)
{
for(m=0;m<i;m++)//循环行数，计算此行此列之上有多少行
{
if(i>0)//如果当前为第一行，则不进行高度计算
{
hei+=array1[m,j];//有趣的事情发生了，尽管当这里m,j均为0，但hei的值仍为400（预计为100），尽管当列发生变化时，hei已被重置为0
alert("array1["+m+","+j+"]="+array1[m,j]);
}
else
{
hei=0;
}
}

wid=j*($("#a li").eq(j-1).width());
$("#a li").eq(oo).css("margin-top",hei);
$("#a li").eq(oo).css("margin-left",wid);

oo++;
}

}
}

}
</script>
<style type="text/css">
<!--
ul, li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#a{ width:600px;}
#a li {
border: 1px solid #CCC;
width: 150px;
margin: 4px;
position: absolute;
}
.a1 {
background-color: #FF1100;
height:100px;
}
.a2 {
background-color: #FF2200;
height:200px;
}
.a3 {
background-color: #FF3300;
height:300px;
}
.a4 {
background-color: #FF4400;
height:400px;
}
.a5 {
background-color: #FF5500;
height:500px;
}
.a6 {
background-color: #FF6600;
height:600px;
}-->
</style>
</head><body>
<input type="button" onclick="paixu('3')" value="点击排序" />
<ul id="a">
<li class="a1">1</li>
    <li class="a2">2</li>
    <li class="a3">3</li>
   <li class="a4">4</li>
    <li class="a5">5</li>
    <li class="a6">6</li>
</ul>
</body>
</html>

解决方案 »

  1.   

    楼主你的设置有问题，应该是top数值是反的，也就是说你的条形显示反了
      

  2.   


    <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>无标题文档</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
    /*程序主要实现相等宽度，不定高度的块的排列问题。大意如下示意图所示
    主要是将每列中的块上下之间看起来连接起来。
    注：其实这个问题目前还没发现有实际意义，但只作为兴趣研究。
     __   __   __
    |  | |  | |  |
    |  | |__| |  |
    |__|  __  |  |
     __  |  | |__|
    |  | |  |  __
    |__| |  | |  |
         |__| |__|
    */
    function paixu(L)//L表示几列，作为参数传入
    {
        var H=0;//行数
        var z=$("#a li").length;//计算出块总数
        var yu=$("#a li").length%L;//计算是否有余数
        var array1={};//定义一个数组
        
        //确定有几行
        if(yu==0)
        {
            H=$("#a li").length/L;
        }
        else
        {
            H=$("#a li").length/L+1;    
        }
        //计算每个块的高度，并将存入二维数组中
        var pp=0;  
        for(m=0;m<H;m++)
        {
            for(n=0;n<L;n++)
            {
                
                if(pp<=z)
                {
                    array1[[m,n]]=$("#a li").eq(pp).height();//可以alert此处查看array1的各个值
                }
                pp++;
            }
        }
        //以下主要实现，每列距上面的高度为此列中，此行以上的高度和，并排为规定的L列，要求为顺序排列
        var oo=0;
        var hei=0;
        var wid=0;
        for(i=0;i<H;i++)
        {        
            for(j=0;j<L;j++)
            {
                hei=0;
                if(i*j-yu>=0)
                {    
                        for(m=0;m<i;m++)//循环行数，计算此行此列之上有多少行
                        {
                            if(i>0)//如果当前为第一行，则不进行高度计算
                            {    
                                hei+=array1[[m,j]];//有趣的事情发生了，尽管当这里m,j均为0，但hei的值仍为400（预计为100），尽管当列发生变化时，hei已被重置为0
                                //alert("array1["+m+","+j+"]="+array1[m,j]);                            
                            }
                            else
                            {
                                hei=0;    
                            }
                        }
                                                
                    wid=j*($("#a li").eq(j-1).width());
                    $("#a li").eq(oo).css("margin-top",hei);
                    $("#a li").eq(oo).css("margin-left",wid);
                    
                    oo++;
                }
                
            }
        }
        
    }
    </script>
    <style type="text/css">
    <!--
    ul, li {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }
    #a{ width:600px;}
    #a li {
        border: 1px solid #CCC;
        width: 150px;
        margin: 4px;
        position: absolute;
    }
    .a1 {
        background-color: #FF1100;
        height:100px;
    }
    .a2 {
        background-color: #FF2200;
        height:200px;
    }
    .a3 {
        background-color: #FF3300;
        height:300px;
    }
    .a4 {
        background-color: #FF4400;
        height:400px;
    }
    .a5 {
        background-color: #FF5500;
        height:500px;
    }
    .a6 {
        background-color: #FF6600;
        height:600px;
    }-->
    </style>
    </head><body>
    <input type="button" onclick="paixu('3')" value="点击排序" />
    <ul id="a">
        <li class="a1">1</li>
        <li class="a2">2</li>
        <li class="a3">3</li>
          <li class="a4">4</li>
        <li class="a5">5</li>
        <li class="a6">6</li>
    </ul>
    </body>
    </html>
    var array1=new Array(); - >  var array1 = {};
    array1[m,n] -> array1[[m,n]]原因：
    js中不能直接使用多维数组，间接使用如：array1[x][y][0, 1]只有前面一个下标有效var arr = [];
    arr[0, 1] = 1;
    arr[0, 2] = 2;
    alert(arr[0, 1]); //1这样才是正确的方法
    var arr = [];
    arr[0] = [];
    arr[0][0] = 0;
    arr[0][1] = 1;
    alert(arr[0][0]); //0arr[[m,n]]更简化的一种方法
    即为：arr[m + ',' + n]