一种web前端万能排版布局的思路

先看图，原理其实很简单，不过功能很强大，目测应该能大量节省排版布局时间。

 

就web元素排版布局而言，在此之前，Web设计师需对Document元素完全按照HTML/CSS语言语法来编写Web页面，这意味着所有Web设计师都必须遵循许多浏览器的非标准差异来编写页面，而W3C又迟迟未统一这一标准，长久以来，导致编写网页Web设计师需处理不同浏览器之间的各种差异，一但排版布局稍微复杂，便完全不可能做到不同浏览器之间视图呈现的一致性，使得这种非标准差异和各种布局单位的换算问题困扰Web设计师。

 

不过我相信用这段代码，应该可以毫无压力地进行排版布局，一些极为复杂精确度要求极高、甚至是跨不同浏览器及其版本的排版问题都可以轻松搞定！

实现方法：

• 先用setBox方法设置一个盒子的大小
• 然后再使用setItem方法将盒子内的图像或DIV。

如果窗口可变化，最后可能需要通过window.resize来重新渲染。

 

//渲染层
"use strict";

var test = {
    
    iw: 0,
    ih: 0,
    zw: 0,
    zh: 0,

    setBox(a, b, c) {
        var t = this;
        t.iw = a;
        t.ih = b;
        t.zw = c;
        t.zh = b / (a / c);
    },

    setItem(x, y, w, h, z, a, f, o, d, c, fn) {

        var t = this,
            w = w / (t.iw / t.zw),
            h = h * (t.zh / t.ih),
            x = x / (w / w),
            y = y / (h / h),
            p = "px";

        a = document.getElementById(a);
        a.style.zIndex = z;

        if (typeof f === "undefined" || f) {
            a.style.position = 'absolute';
        }

        if (!isNaN(x)) {
            a.style.left = x + p;
        } else {
            a.style.left = x;
        }
        if (!isNaN(y)) {
            a.style.top = y + p;
        } else {
            a.style.top = y;
        }
        if (!isNaN(w)) {
            a.style.width = w + p;
        } else {
            a.style.width = w;
        }
        if (!isNaN(h)) {
            a.style.height = h + p;
        } else {
            a.style.height = h;
        }
        if (!d) {
            o = 0;
        }
        a.style.opacity = o;
        //a.style.display = d ? "block" : "none";
        a.setAttribute("class", c);

        if (typeof fn === "function") {
            fn();
        }
    }
}