<!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. char,wchar_t,WCHAR,TCHAR,ACHAR的区别----LPCTSTR

    转自http://blog.chinaunix.net/uid-7608308-id-2048125.html 简介:这是DWORD及LPCTSTR类型的了解的详细页面,介绍了和类,有关的知识,加入收 ...

  2. CodeColorer支持的语言

    CodeColorer支持的语言有:abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, asp ...

  3. 【转】oracle number与java中long、int的对应

    Oracle数据库中number类型在hibernate的引用 1)如果不指定number的长度,或指定长度n>18 id number not null,转换为pojo类时,为java.mat ...

  4. Oracle 相关概念详解

    一.前言 笔者对于Oracle数据库的理解,很长时间停留在“镜花水月”的状态,你说不懂吧,又会用,一较真起来吧,对一些基本概念又说不出一个道道来~如果想要在编码的路上走得更远,这个必定也是绕不过的坎, ...

  5. 圆形DIV

    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

  6. [百度空间] [转]DLL地狱及其解决方案

    DLL地狱及其解决方案 原作者:Ivan S Zapreev 译者:陆其明概要 本文将要介绍DLL的向后兼容性问题,也就是著名的“DLL Hell”问题.首先我会列出自己的研究结果,其中包括其它一些研 ...

  7. 定位position详解:relative与absolute

    定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...

  8. Fbric、Ansible、Docker、Chaos Monkey：DevOps工具的年中回顾

    Fbric.Ansible.Docker.Chaos Monkey:DevOps工具的年中回顾 [编者按]近日,Cyber Engineering Solutions Group 技术经理 Hasan ...

  9. 2014ACM-ICPC 西安赛区总结

    万万没想到,打铁了.以前一直觉得拿铁咖啡的梗是很好笑的,然后有一天这杯咖啡自己喝下去了,就会发现心里真的被梗住了. 复旦的题其实我是有预料到的,前年的复旦题三题从金区到铜区都有,但是从去年的南京赛区开 ...

  10. POJ 2674

    Linear world Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 2448   Accepted: 564 Descr ...