<!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:" + 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>

格子布局 js的更多相关文章

  1. bootstrap深入理解之格子布局

    一.源码文件: _grid.scss:格子系统类文件 Mixins/_grid.scss:支持格子系统实现的mixin集合 Mixins/_grid-framework.scss:格子系统实现的核心m ...

  2. android自定义viewgroup实现等分格子布局

    先上效果图: 实现这样的效果: 一般的思路就是,直接写布局文件,用LinearLayout 嵌套多层子LinearLayout,然后根据权重layout_weight可以达到上面的效果 还有就是利用g ...

  3. 【转】H5+css布局+js+前端和移动端ui+其他汇总

    无意间发现一个博客比较好,由于内容比较多,就把链接转过来,先保存着方便看的时候看. 感谢博主“张果” +++++++++++++++++++++++++++++++++++++++++++++++++ ...

  4. 四种布局JS

    现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...

  5. 移动端rem布局 js

    // rem布局适配 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in ...

  6. 设计一个自动生成棋盘格子的JS小程序

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 等宽格子堆砌 js

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. rem布局js设置，设置网页文档参考字体闭包函数

    (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...

  9. rem布局js实现

    (function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement ...

随机推荐

  1. kibana 修改Ico图标

    修改此路径下的E:\happy\kinbana\kibana-4.2.2-windows\kibana-4.2.2-windows\optimize\bundles的commons.bundle.js ...

  2. android开发 获取父控件的高宽

    @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(wi ...

  3. 重装系统必做之——更换Windows系统的默认临时文件的存储目录

    作为一名计算机爱好者,重装电脑是家常便饭,但是重装电脑的目的无非就是: 1.操作系统更新换代: 2.系统速度太慢: 或者更多.... 我们大多数目的都是上述中第2点,有时候是否仅仅重装系统而忽略了一些 ...

  4. Matlab设置网格线密度（坐标精度）

    1.不精确 set(gca,'XMinorTick','on') 这样的话知识x轴显示了细的密度,网格线并没有变. 2.精确 set(gca,'xtick',-1:0.1:1); set(gca,'y ...

  5. 用U盘作为启动盘，安装Yosemite

    1.选择一个存贮空间大于Yosemite系统(Yosemite系统大概5.1G左右)的U盘,用磁盘工具(Disk Utility)对此磁盘进行分区,可以参照此链接处对U盘进行分区.如果用磁盘工具进行分 ...

  6. JavaScript之arguments对象讲解

    javascript的arguments对象类似于PHP的extract()函数实现. 在不确定函数参数个数的情况下,可以通过arguments访问参数,并以索引0为起始. function sayH ...

  7. Uart串口与RS232串口的区别

    Uart指的是TTL电平的串口:RS232指的是RS232电平的串口. TTL电平是3.3V的,而RS232是负逻辑电平,它定义+5~+12V为低电平,而-12~-5V为高电平. Uart串口的RXD ...

  8. shell 运算

    一个下午折腾一个脚本,shell好久不用,重新学起 一个小成果 size= ] do table=albums_index_${table_num} count=$size times= while ...

  9. ObjectStore onFetch方法获取记录总数

    转自:http://blog.csdn.net/earthhour/article/details/38686029 ObjectStore onFetch方法获取记录总数 require(['doj ...

  10. SOA之（3）——面向服务计算基础

    面向服务计算基础(Service-Oriented Computing Fundamentals) 面向服务的计算(Service-Oriented Computing) 面向服务的计算是一个伞状术语 ...