格子布局 js

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSSASS</title>
</head>
<body></body>
<script>
var metro = {
    sizeArray : [[1, 1], [1, 2], [2, 1], [2, 3], [1, 1], [1, 2], [1, 1], [2, 2], [1, 1]],
    gen: {
        w: 200,
        h: 180
    },
    nameSpace: {
        /* 1_0: [1,0] */
    }
};
metro.init = function () {
    metro.row = 1000 / metro.gen.w >> 0; 
    metro.sort(metro.sizeArray);
};
metro.sort = function (size) {
    var x = 0,
        y = 0,
        memory = {
            flag: Infinity,
            x: Infinity,
            y: Infinity
        },
        name;
    for (var n = 0; n < size.length; n++) {
        if (memory.flag == 0) {
            x = memory.x;
            y = memory.y;
        }
        memory.flag--;
        if (x > metro.row - 1) { 
            x = 0;
            y ++;
        }
        name = x + '_' + y;
        if (name in this.nameSpace) { 
            n --;
            x ++;
            memory.flag < Infinity && memory.flag++;
            continue;
        }
        if (size[n][0] * size[n][1] == 1) { 
            metro.nameSpace[name] = [x, y]; 
            LOG(x, y, n, name, metro.nameSpace[name]);
            x++;
        } else { 
            if (beOver(x, y, size[n])) {
                if (memory.y > y) {
                    memory.y = y;
                    memory.x = x;
                }
                if (memory.y < Infinity) memory.flag = 1;
                n --;
                x ++;
                continue;
            }
            metro.nameSpace[name] = [x, y];
            LOG(x, y, n, name, metro.nameSpace[name]); 
            hold(x, y, n);
            x += size[n][0];
        }
        if (memory.flag == -1) memory = {
            flag: Infinity,
            x: Infinity,
            y: Infinity
        };
    };
    function beOver(x, y, item) {
        var name;
        if (x + item[0] > metro.row) return true; 
        for (var k = 1; k < item[1]; k++) {
            name = x + '_' + (y - 0 + k);
            if (name in metro.nameSpace) return true; 
        }
        for (k = 1; k < item[0]; k++) {
            name = (x - 0 + k) + '_' + y;
            if (name in metro.nameSpace) return true; 
        }
        return false;
    };
    function hold(x, y, n) {
        var item = metro.sizeArray[n];
        for (var t = 0; t < item[0]; t++) {
            for (var k = 0; k < item[1]; k++) {
                name = (x + t) + '_' + (y + k);
                if (t == 0 && k == 0) continue;
                metro.nameSpace[name] = 0; 
                LOG_2(n ,name);
            }
        }
    };
};
metro.init();
function LOG(x, y, n, key) {
   
    var left = metro.gen.w * x,
        top = metro.gen.h * y,
        width = metro.sizeArray[n][0] * metro.gen.w,
        height = metro.sizeArray[n][1] * metro.gen.h;
    var box = document.createElement("div");
    box.id = "ID" + n;
    box.innerHTML = "<h3>" + n +"</h3>" + key + ":(" + metro.nameSpace[key] + ")<br/>";
    box.style.cssText = "position:absolute;border:1px solid #333;left:" + left + "px;top:" + top + "px;" + width + "px;height:" + height + "px;";
    document.body.appendChild(box);
}
function LOG_2(n, key){
   
    document.getElementById("ID" + n).innerHTML +=  key + ":(" + metro.nameSpace[key] + ")<br/>";
}
</script>
</html>

相关阅读:
IOS编程教程（八）：在你的应用程序添加启动画面
 IOS编程浅蓝教程(二) HelloWrld! 建立你的第一个iPhone应用程序
 IOS编程浅蓝教程:锲子
 第四章 Spring.Net 如何管理您的类___IObjectPostProcessor接口
 第一章 Spring.Net介绍
 第二章控制反转和依赖注入
 第三章 Spring.Net 环境准备和搭建
 第四章 Spring.Net 如何管理您的类___对象的手动装配
 第四章 Spring.Net 如何管理您的类___对象、对象工厂和应用程序上下文
 第四章 Spring.Net 如何管理您的类___对象的自动装配
原文地址：https://www.cnblogs.com/wangwenfei/p/javascript_gezi.html