<!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. EntityFramework走马观花之CRUD（上）

    对于任何一个ORM框架,CRUD都是其核心功能,可以这么说,CRUD功能实现得好坏,直接决定了此ORM框架的命运. CRUD是英文Create.Read.Update.Delete四个单词的缩写,对应 ...

  2. 【Sort Colors】cpp

    题目: Given an array with n objects colored red, white or blue, sort them so that objects of the same ...

  3. 三星wep200蓝牙耳机中文说明书

    给耳机充电:耳机内部装有充电电池,第一次使用之前电一定要充满1,先将耳机放入所提供的充电盒中,关上盖.2,将配置器的接头插入充电盒的座孔内.并将另一端插入电源插座.*充电一直充到耳机指示灯由红变蓝*大 ...

  4. 【Python】vim7.4 配置python2.6支持Gundo

    问题描述:          vim7.4 配置python2.6支持Gundo   参考资料:         (1)  http://sjl.bitbucket.org/gundo.vim/    ...

  5. IE 选择文字后 显示小箭头 加速按钮

    IE - 工具 - Internet选项 - 高级 - 不选择<在选择是显示加速按钮>选项就可以了.

  6. 谈谈arm下的函数栈

    引言 这篇文章简要说说函数是怎么传入参数的,我们都知道,当一个函数调用使用少量参数(ARM上是少于等于4个)时,参数是通过寄存器进行传值(ARM上是通过r0,r1,r2,r3),而当参数多于4个时,会 ...

  7. 解决vsftpd日志时间问题

    解决vsftpd日志时间问题 发布时间:August 29, 2008 分类:Linux <你必须承认土也是一种艺术> <Linux下查看Apache的请求数> 最近发现vsf ...

  8. JSP-declareAndOutput

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1" errorPag ...

  9. POJ 2186

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 22189   Accepted: 9076 Des ...

  10. POJ 1523 SPF（求割点）

    题目链接 题意 : 找出图中所有的割点,然后输出删掉他们之后还剩多少个连通分量. 思路 : v与u邻接,要么v是u的孩子,要么u是v的祖先,(u,v)构成一条回边. //poj1523 #includ ...