<!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. ELK：kibana使用的lucene查询语法

    kibana在ELK阵营中用来查询展示数据elasticsearch构建在Lucene之上,过滤器语法和Lucene相同 kibana4官方演示页面 全文搜索 在搜索栏输入login,会返回所有字段值 ...

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

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

  3. SwipeBackLayout的使用方法，右滑返回

    使用方法: 需要右滑返回的activity继承baseActivity就可以, 如: public class SettingActivity extends BaseActivity {} 为防止滑 ...

  4. sql中having的使用

    where 和having有什么区别? where 是group by之前进行筛选,having是group by 之后进行统计的筛选,一般having会和group by一起使用,结合聚合函数,统计 ...

  5. 【BZOJ】【1049】【HAOI2006】数字序列

    DP 第一问比较水……a[i]-=i 以后就变成最长不下降子序列问题了,第二问这个结论好神奇,考试的时候怎么破?大胆猜想,不用证明?TAT 题解:http://pan.baidu.com/share/ ...

  6. [usaco2009febgold]道路翻新 最短路+dp

    这道题居然卡SPFA,难受,写了这么长时间的SPFA,都快把dij忘光了: 设d[i][j]为修j条路到i的最短距离,然后跑堆优化dij就行了: 实测中SPFA两组大数据超时严重: dij约300ms ...

  7. [工作积累] jboolean is neither JNI_TRUE nor JNI_FALSE

    jboolean result = env->CallBooleanMethod(ShopDataAndroid.IAPBridge_Object, ShopDataAndroid.IAPBri ...

  8. 研究Dropbox Server端文件系统

    一.传统文件系统 可以理解成两部分:1.真正的storage区,被分割成n个扇区:2.文件系统,其实就是一个FAT表. 二.Dropbox的文件系统 例如,一个modeo.mov的文件,大小为15M. ...

  9. Sqli-labs less 35

    Less-35 35关和33关是大致的一样的,唯一的区别在于sql语句的不同. $sql="SELECT * FROM users WHERE id=$id LIMIT 0,1"; ...

  10. 九个衡量 Rails 应用性能的小方法

    你有个绝佳的商业创意,日复一日地将它完善丰满起来.后来,你雇了一群天赋异禀的开发者.Web 设计师和用户体验专家,他们用一种非常棒的框架--Ruby on Rails 帮你实现长久以来的梦想. 你的网 ...