<!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. android开发 图片合成

    private static Bitmap compositeImages(Bitmap srcBitmap,Bitmap dstBitmap){ Bitmap bmp = null; //下面这个B ...

  2. 【BZOJ】【2938】【POI2000】病毒

    AC自动机 好题>_<(其实是一次AC有些感动) 嗯要找到无限长的一个字符串不包含任何一个模板串,就意味着在AC自动机(Trie图)上找到一个不经过任何一个危险结点的环,深搜一下就好了…… ...

  3. poi过滤操作后产生新的sheet

    public Sheet filterSheet(Sheet sheetToFilter){ if(sheetToFilter == null){ System.out.println("s ...

  4. Leetcode#99 Recover Binary Search Tree

    原题地址 中序遍历二叉搜索树,正常情况下所有元素都应该按递增排列,如果有元素被交换,则会出现前面元素大于后面的情况,称作反序.由于交换了两个节点,所以通常会有两处反序,但如果是两个相邻节点发生了交换, ...

  5. highchart 导出图片, 显示空白

    使用highchart时, 导出的图片会变空白..   解决方案: 不要加载grid.js

  6. FormCreate & FormActivate & FormShow执行顺序演示

    procedure TForm1.FormCreate(Sender: TObject);begin  form1.Caption:=form1.Caption +'+Create'; end; pr ...

  7. O2O模式成功案例分享 汲取精华化为己用

    本文通过分享一些公司的o2o成功案例让您了解什么是O2O,o2o的优势,o2o模式有哪些,未来我们要如何做o2o才更有竞争力,学牛人的o2o创新玩法,摸索适合自己的o2o思路.拥抱o2o - 传统企业 ...

  8. 深入理解C# 静态类与非静态类、静态成员的区别

    静态类 静态类与非静态类的重要区别在于静态类不能实例化,也就是说,不能使用 new 关键字创建静态类类型的变量.在声明一个类时使用static关键字,具有两个方面的意义:首先,它防止程序员写代码来实例 ...

  9. xml string 相互转换

    一.使用最原始的javax.xml.parsers,标准的jdk api // 字符串转XMLString xmlStr = /"....../";StringReader sr ...

  10. 一篇不错的讲解Java异常的文章(转载）

    http://www.blogjava.net/freeman1984/archive/2007/09/27/148850.html 六种异常处理的陋习 你觉得自己是一个Java专家吗?是否肯定自己已 ...