网格(UED所谓栅格化)方案生成器

本文转载于：http://www.twinsenliang.net/skill/20081109.html

首先这是一篇让你知其所以然的文章，如果你不了解栅格化你应该看看，如果你很了解栅格化你更加应该看看。

事情的起因：
今天帮跑去跟小组争取福利，和领导谈话。
我说小组对于那种虚名的表扬最近不太感冒，最好来点实质的奖励。
他就说什么技术提升之类远景什么的，让大家为了理想去工作。
我说我们组总体水平已经是重构界最强了的哦。
他就问我知道什么是栅格化么？不知道怎么谈业界最强。
我无言……



我这样对技术沉溺到BT的人，又怎会允许自己在技术上的无知呢？……于是回到座位，查了一下，找到了些业界的文章。

    网页栅格系统研究（1）：960的秘密 http://ued.taobao.com/blog/2008/10/22/grid_system_research_1/
    网页栅格系统研究（2）：蛋糕的切法 http://ued.taobao.com/blog/2008/10/22/
    网页栅格系统研究（3）：粒度问题 http://ued.taobao.com/blog/2008/10/28/
    网页栅格系统研究（4）：技术实现 http://ued.taobao.com/blog/2008/11/05/grid_system_research_/
    网页的栅格系统设计： http://www.vvsoo.com/article/19.htm
    我的栅格系统实现： http://www.gracecode.com/Archive/Display/2363

栅格化……



qzone的“栅格化”……四年前就开始了……鬼都不知道那叫“三格”（其实正确的说那个应该叫做网格），我还以为山木的弟弟呢……

    引用平面设计导论
    5、网格式结构布局。
    网格系统是现代国际上普遍使用的一种版面构成方式。勒.柯布塞的《模式》一书是最早将网格用于设计的，他将一个矩形以黄金分割法分割出44个设计方案，从而为图形设计提供了一个较宽选择余地的样板。  近三十年来，越来越多的平面设计家开始熟练使用网格这种技巧与自由灵活的方式相结合，根据主题与设计的需要，集条理与活泼于一体。

x=小模块宽度
y=模块的间距
z=大模块宽度
m=大模块宽度等同于小模块宽度的个数
w=总宽度
根据qzone的实际状况(z=x*2+y)得三元一次方程式如下：
w=x*4+3*y
推得
w=z*2+y

根据这个才会得到qzone现在的这样的比例。

我们现在按照实际要求(z=x*m+y)基础推理得总宽度不定情况下，假定需容纳小宽度模块n个得
w=x*n+(n-1)*y
同理推得
w=z*Math.floor(n/m)+(Math.floor(n/m)-(n%m-1))*y+x*(n%m)

使用穷举的程序如下（简单的算法想不到，我高数没学好）：

    function DOG(){//最搞笑的是这里的缩写居然是DOG……
    //Deletion of grid
    //m=大模块宽等同于小模块宽度的倍数
    //x=小模块宽度
    //y=模块的间距
    //z=大模块宽度
    //w=总宽度
    mm=3;//设定默认对比倍数，qzone的为2;
    mmax=1002;//最大像素
    my=5;
    for (var mx=my+1;mx<mmax;mx++){
    mz = mx*mm+(mm-1)*my;
    for (var mn=3;((mn*mx)<=mmax) || (mn*my)<mmax;mn++){
    mw=mz*Math.floor(mn/mm)+(Math.floor(mn/mm)+(mn%mm)-1)*my+mx*(mn%mm);
    if ((Math.floor(mw)==mw) && (mw<=mmax) && mw>900 && 3<mn && mn<10 && mx>150){
    document.write(mw+"="+mz+"*Math.floor("+mn+"/"+mm+")+(Math.floor("+mn+"/"+mm+")+("+mn+"%"+mm+")-1)*"+my+"+("+mn+"%"+mm+")*"+mx+"<br />");
    document.write("小模块宽度:"+mx+";");
    document.write("模块的间距:"+my+";");
    document.write("大模块宽度:"+mz+";");
    document.write("全是小模块的话个数为:"+mn+";")
    document.write("总宽度:"+mw+"<br />");
    }
    }
    }
    }
    DOG();//运算时间小于15秒，可以接受。

上例已经按照最佳状态进行筛选n选3以上，总宽度选定为900以上，全是小模块的话小于10个，最小的小模块宽度大于150；之后可以得到一个详尽的列表。

Twinsen这里只选取其中随便几个。
1002=600*Math.floor(5/3)+(Math.floor(5/3)+(5%3)-1)*3+(5%3)*198
小模块宽度:198;模块的间距:3;大模块宽度:600;全是小模块的话个数为:5;总宽度:1002
1001=750*Math.floor(4/3)+(Math.floor(4/3)+(4%3)-1)*3+(4%3)*248
小模块宽度:248;模块的间距:3;大模块宽度:750;全是小模块的话个数为:4;总宽度:1001

然后又根据网站布局的可三可二原则（即小模块的个数应当为6时）以及两大一小原则（即小模块的个数应当为5时）以及一大两小原则（即小模块的个数应当为4时）同时

    得到相同的答案950
    950=950*Math.floor(3/3)+(Math.floor(3/3)+(3%3)-1)*7+(3%3)*312
    小模块宽度:312;模块的间距:7;大模块宽度:950;全是小模块的话个数为:3;总宽度:950
    950=711*Math.floor(4/3)+(Math.floor(4/3)+(4%3)-1)*6+(4%3)*233
    小模块宽度:233;模块的间距:6;大模块宽度:711;全是小模块的话个数为:4;总宽度:950
    950=568*Math.floor(5/3)+(Math.floor(5/3)+(5%3)-1)*5+(5%3)*186
    小模块宽度:186;模块的间距:5;大模块宽度:568;全是小模块的话个数为:5;总宽度:950
    950=473*Math.floor(6/3)+(Math.floor(6/3)+(6%3)-1)*4+(6%3)*155
    小模块宽度:155;模块的间距:4;大模块宽度:473;全是小模块的话个数为:6;总宽度:950
    以及7等分原则
    950=402*Math.floor(7/3)+(Math.floor(7/3)+(7%3)-1)*9+(7%3)*128
    小模块宽度:128;模块的间距:9;大模块宽度:402;全是小模块的话个数为:7;总宽度:950
    以及9等分原则
    950=314*Math.floor(9/3)+(Math.floor(9/3)+(9%3)-1)*4+(9%3)*102
    小模块宽度:102;模块的间距:4;大模块宽度:314;全是小模块的话个数为:9;总宽度:950
    还有11等分原则
    950=254*Math.floor(11/3)+(Math.floor(11/3)+(11%3)-1)*7+(11%3)*80
    小模块宽度:80;模块的间距:7;大模块宽度:254;全是小模块的话个数为:11;总宽度:950



大家可以明显地看到这里和UED得出的结论一样都是950，但是Twinsen一点都不赞同UED的分析方式。这里有几点很想说明一下的：

首先是这个名称的问题，别人明明就是叫做网格，干嘛死活要搞个名词出来作为自己研究的成果。别人《超越CSS》里面写的也是”网格“，硬是将别人的内容变成栅格化。简直就是对笔者莫大的侮辱。

其次是强拉硬扯的典故和经典。“勒.柯布塞的《模式》一书是最早将网格用于设计的，他将一个矩形以黄金分割法分割出44个设计方案，从而为图形设计提供了一个较宽选择余地的样板。”……2n*3*5……神奇的数字……确实是神奇了，别人用的是黄金分割：”根号5减1除以2（0.6180339）“；用一个无理数算出一个极其有规律的自然数，我都觉得神奇。（看来某人不单设计没学好，数学也没学好……）也就是为什么上面的例子使用的是穷举，我实在想不到更好的办法……。再说那篇文章里面提到的黄金分割也不赞同，因为很牵强；比如我分的格是1px，我就不信搞不出比你更能适应更能黄金的两个块出来。

第三其实早前我们小组在研究YUI的时候，很不赞同他们的构想。如果我们使用这样固定的宽高大小比例（最可恶的是谁限定了间距一定为那么死老粗的10px），那么请问我们要设计师来干嘛？剩下的也就是定定颜色，画画小图标做做广告图而已了。

第四所谓的栅格化某种程度上面来讲只是一群偷懒的页面仔省事的办法而已。定死了一个个的块以后，直接的套用固有的CSS去完成需求（达不成结构与表现分离）；只要一有设计师不使用这套东西就被灌上：“不栅格化”的名头。损害项目的高度扩展性，PO害设计师才华；损人利己，非行家所为。

解释了一大堆，问题也说了一大堆；然而Twinsen并不是一个评论而不给解决方案废物；而且Twinsen也不会是手动去画若干张图来显示自己很专业的人。所以做了下面的这样的一个生成器，只是为了方便设计师在设计的时候可以方便、快捷、有效的得到最正确的创作指引。