就web元素排版佈局而言，在此之前，Web設計師需對Document元素完全按照HTML/CSS語言語法來編寫Web頁面，這意味著所有Web設計師都必須遵循許多瀏覽器的非標準差異來編寫頁面，而W3C又遲遲未統一這一標準，長久以來，導致編寫網頁Web設計師需處理不同瀏覽器之間的各種差異，一但排版佈局稍... ...
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:#000;width:100%; height:100%; }
#demo_div{ background:#FFF; width:100%; height:100%; } #canvas2{ background:#CCC; } .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. * **/ 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設計師可以使水滴不再受到不同河流，河流自然運動等諸多因素影響，能夠非常輕鬆地實現精準排版佈局，且不必擔心瀏覽器差異等問題，更能縮減技術成本和縮短項目開發時間加快進度。:)
用這段代碼，你可以毫無排版佈局壓力，任何一切複雜得排版都可以輕鬆搞定！
版權聲明：本BLOG所有文章、代碼實例均為原創，僅供交流學習之用，未經特別說明，授權不得用於商用、出版。任何違反本聲明的行為均屬於非法行為。如需非商業性轉載，請保留署名。如需商業性使用、轉載出版，請直接和我聯繫，qq：2185987263。
