格子布局 js
<!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>
posted on 2013-06-21 15:45 Ijavascript 阅读(582) 评论(0) 编辑 收藏 举报