jquery_jqueryに基づく不規則な長方形の配置の実装コード

これはテトリスを思い出させます。コンテナ内のすべてのブロック要素が絶対位置で配置され、収まらない場合はキューに収まるものを見つけます。 . 要素の配置、 が見つからない場合は次の行に折り返す 具体的な考え方は次のとおりです。コードには詳細なコメントが記載されているので、コードを参照してください。 以下はデモです: http://demo.jb51.net/js/2012/sortRect/ コード パッケージのダウンロード sortRect.rar

コードをコピー コードは次のとおりです: 不规则宽高排列 .box { position: absolute; width: 100px; height: 100px; border: 1px solid #ffffff; display: none; background: url(img/1.jpg); /*margin-left: 4px; margin-top: 4px;*/ } .box2 { position: absolute; width: 100px; height: 202px; border: 1px solid #ffffff; display: none; background: url(img/2.jpg); /*margin-left: 4px; margin-top: 4px;*/ } .box3 { position: absolute; width: 202px; height: 100px; border: 1px solid #ffffff; display: none; background: url(img/3.jpg); /*margin-left: 4px; margin-top: 4px;*/ } .box4 { position: absolute; width: 202px; height: 202px; border: 1px solid red; background: url(img/4.jpg); display: none; } //初期化四角阵 var initMatrix = function(x, y){ if (!x || !y) { return; } x = ~ ~ x; y = ~ ~ y; var mt = []; var i = 0; var getX = function(xl){ var i = 0; var行列X = []; for (; i 行列X[i] = 0; } return { mt:matrixX, isComplete:false, spaces:[{ index:0, len:matrixX.length }] }; } for (; i mt[i] = getX(x); } 富士山を返します。 } // 生成元素相应的队列 var getQuene = function(eleColl, Base){ if (!eleColl) { return; } var quene = []; var i = 0; var len = eleColl.length; var getEleMatrix = function(ele, Base){ var ht = ele.outerHeight() / Base.height; var wt = ele.outerWidth() / Base.width; return { ele: ele, ht: ht, wt: wt } } for (; i quene[i] = getEleMatrix($(eleColl[i]), ベース); } クエンを返します。 } //以行のために单位扫描マス阵 var sortEveryEle = function(pannelMatrix, sortQuene, UnitEle, callback){ if (!pannelMatrix || !sortQuene) { return; } unitEle = ユニットエレ || { 幅: 0、 高さ: 0 }; var checkSpace = function(line){ var i = 0; var len = line.mt.length; var tmpWt = 0; var tmpidx = 0; var tmpQuene = []; var isSetIdx = false; for (; i if (line.mt[i] == 0) { if (!isSetIdx) { tmpidx = i; isSetIdx = true; } tmpWt ; } if ((line.mt[i] == 1) || (i == len - 1)) { //保存空間情報到里面队列 if (tmpWt &gt ; 0) { tmpQuene.push({ インデックス: tmpidx, len: tmpWt }); } //清空临時間情報 tmpidx = 0; tmpWt = 0; } } if (tmpQuene.length line.isComplete = true; } line.spaces = tmpQuene; 戻る; } var updateMartix = function(curLine, mt, ele, spidx, lineNum){ var i = j = 0; //获取当前空白情報 var sp = curLine.spaces[spidx]; //結果が複数の行を占有する場合、すべての占有行の空間を更新します if (ele.ht > 1) { j = 0; for (; j i = 0; for (; i mt[lineNum j].mt[sp.index i] = 1; } //空白空间を更新 checkSpace(mt[lineNum j]); } } else {///結果が单行の话だけ必要更新第一本行 for (; i curLine.mt[sp .index i] = 1; } //更新模块 checkSpace(curLine); } }; //获取合适的元素 var getRightEle = function(stQu, wd){ var i = 0; var len = stQu.length; for (; i if (stQu[i].wt return stQu.splice(i, 1); } } 戻る; } //扫描单行 var scanLine = function(oneLine, sortQuene, mt, lineNum){ var i = 0; var len = oneLine.spaces.length; //充填 var theWt = oneLine.spaces[i].len; var mtLeft = mtTop = 0; // 判断能容纳的宽は多少 var rtEle = getRightEle(sortQuene, theWt); if (rtEle) { //放置元素 //rtEle[0].ele.css("left", oneLine.spaces[i].index * 102);//ベース幅 //rtEle[0].ele.css("top", lineNum * 102);//ベースの高さ; mtLeft = oneLine.spaces[i].index * (unitEle.width || 0); mtTop = lineNum * (unitEle.height || 0); if (コールバック) { callback({ left: mtLeft, top: mtTop, rect: rtEle[0] }); } //更新四角阵 updateMartix(oneLine, mt, rtEle[0], i, lineNum); //戻り位置队列 return { left: mtLeft, top: mtTop, rect: rtEle[0] } } } var i = j = 0; var pmLen = pannelMatrix.length; var completeLine = 0; var thePosQuene = [], pos; for (; i while (!pannelMatrix[i].isComplete && (sortQuene.length > 0)) { pos = scanLine(pannelMatrix[i], sortQuene) 、pannelMatrix、i); if (pos) { thePosQuene.push(pos); } } } PosQuene を返します。 } var con = $("#con"); // 関連する 2 つの数グループを生成 varbaseWidth = 102; varbaseHeight = 102; varbase = { width:baseWidth, height:baseHeight } var pannel = $("#pannel"); var thePannelSize = { 幅: pannel.width(), 高さ: pannel.height() }; var pannelMatrix = initMatrix(thePannelSize.width /baseWidth, thePannelSize.height /baseHeight); //得要排序不规宽高的方块队列 var sortQuene = getQuene(pannel.find("div"), Base); //遍历matrix var theQu = sortEveryEle(pannelMatrix,sortQuene,base); var theQuOne = theQu.shift(); var selfCall = function(){ if (!theQuOne) { return; } var my = argument.callee; theQuOne.rect.ele.show().animate({ left: " " theQuOne.left, top: " " theQuOne.top }, { duration: 1000, easing: "easeOutBounce", complete: function(){ theQuOne = theQu.shift(); my.call(); } }); } selfCall();

jquery_jqueryに基づく不規則な長方形の配置の実装コード

関連記事