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 matrixX[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]), base); } 반환 퀸; } //以行为单位扫描矩阵 var sortEveryEle = function(pannelMatrix, sortQuene, unitEle, callback){ if (!pannelMatrix || !sortQuene) { return; } unitEle = 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)) { //保存space信息到里面队列 if (tmpWt &gt ; 0) { tmpQuene.push({ index: 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({ 왼쪽: mtLeft, 상단: mtTop, 직선: rtEle[0] }); } //更新矩阵 updateMartix(oneLine, mt, rtEle[0], i, lineNum); //返回位置队列 return { left: mtLeft, top: mtTop, right: 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 , 패널매트릭스, i); if (pos) { thePosQuene.push(pos); } } } return thePosQuene; } var con = $("#con"); //생성상의 두 가지 유형 var baseWidth = 102; var baseHeight = 102; var base = { 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 =args.callee; theQuOne.lect.ele.show().animate({ left: " " theQuOne.left, top: " " theQuOne.top }, { 기간: 1000, 완화: "easeOutBounce", 완료: function(){ theQuOne = theQu.shift(); my.call(); } }); } selfCall();

jquery_jquery를 기반으로 불규칙한 직사각형 배열을 위한 구현 코드

관련 기사