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