html萬能排版布局插件，是不是感覺很強大，原理其實很簡單，不過功能很強大哈哈，大量節省排版布局時間啊！
test.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>web視圖定位布局創意技術演示頁</title> <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no,maximum-scale=1.0" id="viewport" name="viewport"> <script type="text/javascript" src="web_layout.js"></script> <style type="text/css"> html,body{ margin:0; padding:0; width:100%; height:100%; } #canvas1{ background:url(data:image/gif;base64,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) no-repeat; background-size:100% 100%; } #demo_div{ background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL8AAAC/CAYAAACv6g0GAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8yMS8xNul+eZ8AAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAEeklEQVR4nO3TOYIbNwBFwT9zP5/WB6QDSdYsJKfZjR1VEYAIwX9vt9st/7693QKbeU+Sf263t94fgdbe/xwEwG7eP14EwE7evz4IgF18G38iAPZwd/yJAFjfw/EnAmBtT8efCIB1/Tj+RACs6dD4EwGwnsPjTwTAWl4afyIA1vHy+BMBsIZT408EwPxOjz8RAHO7NP5EAMzr8vgTATCnIuNPBMB8io0/EQBzKTr+RADMo/j4EwEwhyrjTwTA+KqNPxEAY6s6/kQAjKv6+BMBMKYm408EwHiajT8RAGNpOv5EAIyj+fgTATCGLuNPBEB/3cafCIC+uo4/EQD9dB9/IgD6GGL8iQBob5jxJwKgraHGnwiAdoYbfyIA2hhy/IkAqG/Y8ScCoK6hx58IgHqGH38iAOqYYvyJAChvmvEnAqCsqcafCIBypht/IgDKmHL8iQC4btrxJwLgmqnHnwiA86YffyIAzlli/IkAeN0y408EwGuWGn8iAI5bbvyJADhmyfEnAuBny44/EQDPLT3+RAA8tvz4EwFw3xbjTwTAd9uMPxEAn201/kQA/LXd+BMB8MuW408EwMbjTwSwu63HnwhgZ9uPPxHAroz/NwHsx/g/EMBejP8LAezD+O8QwB6M/wEBrM/4nxDA2oz/BwJYl/EfIIA1Gf9BAliP8b9AAGsx/hcJYB3Gf4IA1mD8JwlgfsZ/gQDmZvwXCWBexl+AAOZk/IUIYD7GX5AA5mL8hQlgHsZfgQDmYPyVCGB8xl+RAMZm/JUJYFzG34AAxmT8jQhgPMbfkADGYvyNCWAcxt+BAMZg/J0IoD/j70gAfRl/ZwLox/gHIIA+jH8QAmjP+AcigLaMfzACaMf4BySANox/UAKoz/gHJoC6jH9wAqjH+CcggDqMfxICKM/4JyKAsox/MgIox/gnJIAyjH9SArjO+CcmgGuMf3ICOM/4FyCAc4x/EQJ4nfEvRACvMf7FCOA441+QAI4x/kUJ4GfGvzABPGf8ixPAY8a/AQHcZ/ybEMB3xr8RAXxm/JsRwF/GvyEB/GL8mxKA8W9t9wCMf3M7B2D8bBuA8ZNkzwCMn//tFoDx88lOARg/3+wSgPFz1w4BGD8PrR6A8fPUygEYPz9aNQDj55AVAzB+DlstAOPnJSsFYPy8bJUAjJ9TVgjA+Dlt9gCMn0tmDsD4uWzWAIyfImYMwPgpZrYAjJ+iZgrA+ClulgCMnypmCMD4qWb0AIyfqkYOwPipbtQAjJ8mRgzA+GlmtACMn6ZGCsD4aW6UAIyfLkYIwPjppncAxk9XPQMwfrrrFYDxM4QeARg/w2gdgPEzlJYBGD/DaRWA8TOkFgEYP8OqHYDxM7SaARg/w6sVgPEzhRoBGD/TKB2A8TOVkgEYP9MpFYDxM6USARg/07oagPEztSsBGD/TOxuA8bOEMwEYP8t4NQDjZymvBGD8LOdoAMbPko4EYPws66cAjJ+lPQvA+FneowCMny3cC8D42cbXAIyfrXwMwPjZzp8A3m63W++/QBf/AXulu1apA5fuAAAAAElFTkSuQmCC) no-repeat; background-size:100% 100%; } #canvas2{ background:#FFF; } .circle{ background:#F90; -moz-border-radius:999px; -webkit-border-radius:999px; border-radius:999px; } </style> </head> <body> <div id="canvas1"></div> <div id="demo_div"></div> <div id="canvas2"></div> <div id="circle1" class="circle"></div> <div id="circle2" class="circle"></div> <div id="circle3" class="circle"></div> <div id="circle4" class="circle"></div> <div id="circle5" class="circle"></div> <div id="circle6" class="circle"></div> <div id="circle7" class="circle"></div> <div id="circle8" class="circle"></div> <div id="circle9" class="circle"></div> <div id="circle10" class="circle"></div> <div id="circle11" class="circle"></div> <div id="circle12" class="circle"></div> <div id="circle13" class="circle"></div> <div id="circle14" class="circle"></div> <div id="circle15" class="circle"></div> <div id="circle16" class="circle"></div> <div id="circle17" class="circle"></div> </body> </html>
web_layout.js
/** * web_layout.js - v1.0.0 (2016-07-12T18:15:51+0800) * * Allows you to easily page layout! * by tie. qq：2185987263 * * Copyright (C) 2016, tie. * All rights reserved. * **/ var web_layout = { zoom: { _o_w: 0, _o_h: 0, _n_w: 0, _n_h: 0 }, draw: function(d) { var self = this; var n = d.length; if (n > 0) { for (var i = 0; i < n; i++) { self.config( d[i].w, d[i].h, { id: d[i].id, w: d[i].zoom_w, h: d[i].zoom_h, x: d[i].x, y: d[i].y, layer: d[i].layer, position: d[i].position, opacity: d[i].opacity, fn: d[i].fn }); var nn = d[i].subobject.length; if (nn > 0) { for (var j = 0; j < nn; j++) { self.set( d[i].subobject[j].w, d[i].subobject[j].h, { id: d[i].subobject[j].id, x: d[i].subobject[j].x, y: d[i].subobject[j].y, layer: d[i].subobject[j].layer, position: d[i].subobject[j].position, opacity: d[i].subobject[j].opacity, fn: d[i].subobject[j].fn }); } } } } }, config: function(w, h, v) { var self = this; if ("object" != typeof v || isNaN(w) || isNaN(h)) { return; } var _w = _h = 0; isNaN(v.w) || isNaN(v.h) || (_w = v.w, _h = v.h); isNaN(v.w) && !isNaN(v.h) && (_w = w / (h / h / (w / w / (h / v.h))), _h = v.h); isNaN(v.h) && !isNaN(v.w) && (_w = v.w, _h = h / (w / v.w)); self.zoom._o_w = w, self.zoom._o_h = h, self.zoom._n_w = _w, self.zoom._n_h = _h; if ("undefined" == typeof v.id) { return; } var Object = document.getElementById(v.id); if ("object" != typeof Object) { return; } (0 != _w && (Object.style.width = _w + "px"), 0 != _h && (Object.style.height = _h + "px"), self.xy(v, Object, w, h, _w, _h), "function" == typeof v.fn && v.fn(Object)); }, xy: function(v, Object, w, h, _w, _h) { if ("undefined" != typeof v.position) { Object.style.position = v.position; } if (!isNaN(v.opacity)) { Object.style.opacity = v.opacity; } if (!isNaN(v.layer)) { Object.style.zIndex = v.layer; } if (!isNaN(v.x)) { if (!isNaN(_w) && !isNaN(w)) { Object.style.left = v.x / (w / _w) + "px"; } } if (!isNaN(v.y)) { if (!isNaN(_h) && !isNaN(h)) { Object.style.top = v.y / (h / _h) + "px"; } } }, set: function(w, h, v) { var self = this; if ("object" != typeof v || isNaN(self.zoom._n_w) || isNaN(self.zoom._n_h)) { return; } var _w = w / (this.zoom._o_w / self.zoom._n_w), _h = h / (this.zoom._o_h / self.zoom._n_h); if ("undefined" == typeof v.id) { return; } var Object = document.getElementById(v.id); if ("object" != typeof Object) { return; } var __w, __h; !isNaN(w) ? __w = _w + "px" : __w = w; !isNaN(h) ? __h = _h + "px" : __h = h; (Object.style.width = __w, Object.style.height = __h, this.xy(v, Object, w, h, _w, _h), "function" == typeof v.fn && v.fn(Object)); } } /* 示例 */ function a(){ return [ { "id":"canvas1","w":640,"h":1136,"zoom_w":document.body.clientWidth,"x":0,"y":0,"layer":1,"position":"absolute","subobject":[ { "id":"demo_div", "w":191, "h":191, "x":328, "y":332, "layer":2, "position":"absolute" } ] }, { "id":"canvas2","w":146,"h":150,"zoom_w":document.body.clientWidth/2,"x":80,"y":300,"layer":3,"position":"absolute","subobject":[ { "id":"circle1","w":53,"h":53,"x":100,"y":377,"layer":4,"position":"absolute","opacity":0.55 }, { "id":"circle2","w":50,"h":50,"x":112,"y":389,"layer":4,"position":"absolute","opacity":0.60 }, { "id":"circle3","w":48,"h":48,"x":127,"y":399,"layer":4,"position":"absolute","opacity":0.75 }, { "id":"circle4","w":45,"h":45,"x":142,"y":404,"layer":4,"position":"absolute","opacity":0.80 }, { "id":"circle5","w":43,"h":43,"x":158,"y":405,"layer":4,"position":"absolute","opacity":0.75 }, { "id":"circle6","w":41,"h":41,"x":173,"y":402,"layer":4,"position":"absolute","opacity":0.70 }, { "id":"circle7","w":39,"h":39,"x":187,"y":396,"layer":4,"position":"absolute","opacity":0.65 }, { "id":"circle8","w":37,"h":37,"x":199,"y":386,"layer":4,"position":"absolute","opacity":0.60 }, { "id":"circle9","w":35,"h":35,"x":207,"y":374,"layer":4,"position":"absolute","opacity":0.55 }, { "id":"circle10","w":33,"h":33,"x":212,"y":361,"layer":4,"position":"absolute","opacity":0.50 }, { "id":"circle11","w":32,"h":32,"x":213,"y":347,"layer":4,"position":"absolute","opacity":0.45 }, { "id":"circle12","w":30,"h":30,"x":209,"y":333,"layer":4,"position":"absolute","opacity":0.40 }, { "id":"circle13","w":29,"h":29,"x":202,"y":321,"layer":4,"position":"absolute","opacity":0.35 }, { "id":"circle14","w":27,"h":27,"x":192,"y":311,"layer":4,"position":"absolute","opacity":0.30 }, { "id":"circle15","w":26,"h":26,"x":180,"y":304,"layer":4,"position":"absolute","opacity":0.25 }, { "id":"circle16","w":25,"h":25,"x":166,"y":300,"layer":4,"position":"absolute","opacity":0.20 }, { "id":"circle17","w":23,"h":23,"x":152,"y":301,"layer":4,"position":"absolute","opacity":0.15 } ] } ]; } //頁面加載結束后 window.onload=function(){ //布局畫布 web_layout.draw(a()); //頁面大小改變后重新布局（可選） window.addEventListener("resize",function(){ web_layout.draw(a()); }); }
就web元素排版布局而言，在此之前，Web設計師需對Document元素完全按照HTML/CSS語言語法來編寫Web頁面，這意味着所有Web設計師都必須遵循許多瀏覽器的非標准差異來編寫頁面，而W3C又遲遲未統一這一標准，長久以來，導致編寫網頁Web設計師需處理不同瀏覽器之間的各種差異，一但排版布局稍微復雜，便完全不可能做到不同瀏覽器之間視圖呈現的一致性，使得這種非標准差異和各種布局單位的換算問題成為困擾Web設計師、網頁排版布局浪費大量寶貴時間增加技術成本影響開發進度的關鍵原因。因此Web視圖定位布局創意技術，徹底攻克解決了這一世界性普遍技術難題 :)
我們處在一個物質性質極其不確定的世界，因此需對某些物質位置進行完全非獨立精確定位或對其進行獨立標准尺度變化衡量幾乎不可能實現。通常性質為動態流動變化且無固定容器無可塑外形發展變化較為不穩定的物質譬如水相對於其依存的主體時譬如河流，標准HTML/CSS語言認為可以通過寬度高度、距離等來定位其位置大小容積等，當主體依存關系改變時，其相對或絕對位置也因此而發生改變，且認為此算法能很好地服務於一切計算機網頁視圖呈現的應用中。然而這一算法並非如此，無法想象、當一滴水在不同河流都需要以10px*10px的高寬漂浮流動在水面且位置需保持固定不變，問題顯而易見。:)
但現在可以實現了，使用Web視圖定位布局創意技術，令人激動和喜悅。Web設計師可以使水滴不再受到不同河流，河流自然運動等諸多因素影響，能夠非常輕松地實現精准排版布局，且不必擔心瀏覽器差異等問題，更能縮減技術成本和縮短項目開發時間加快進度。:)
用這段代碼，你可毫無排版布局壓力，任何一切復雜得排版都可以輕松搞定！