基于jquery的不规则矩形的排列实现代码

2020-05-22 16:48:16易采站长站整理

return;
}
unitEle = unitEle ||
{
width: 0,
height: 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 < len; i++) {
if (line.mt[i] == 0) {
if (!isSetIdx) {
tmpidx = i;
isSetIdx = true;
}
tmpWt++;
}
if ((line.mt[i] == 1) || (i == len – 1)) {
//保存space信息到里面队列
if (tmpWt > 0) {
tmpQuene.push({
index: tmpidx,
len: tmpWt
});
}
//清空临时信息
tmpidx = 0;
tmpWt = 0;
}
}
if (tmpQuene.length <= 0) {
line.isComplete = true;
}
line.spaces = tmpQuene;
return;
}
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 < ele.ht; j++) {
i = 0;
for (; i < ele.wt; i++) {
mt[lineNum + j].mt[sp.index + i] = 1;
}
//更新空白空间
checkSpace(mt[lineNum + j]);
}
}
else {//如果是单行的话只要更新第一个本行
for (; i < ele.wt; i++) {
curLine.mt[sp.index + i] = 1;
}
//更新模块
checkSpace(curLine);
}
};
//获取合适的元素
var getRightEle = function(stQu, wd){
var i = 0;
var len = stQu.length;
for (; i < len; i++) {
if (stQu[i].wt <= wd) {
return stQu.splice(i, 1);
}
}
return;
}
//扫描单行
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);//base width
//rtEle[0].ele.css(“top”, lineNum * 102);//base height;
mtLeft = oneLine.spaces[i].index * (unitEle.width || 0);
mtTop = lineNum * (unitEle.height || 0);
if (callback) {
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 < pmLen; i++) {
while (!pannelMatrix[i].isComplete && (sortQuene.length > 0)) {
pos = scanLine(pannelMatrix[i], sortQuene, pannelMatrix, i);
if (pos) {
thePosQuene.push(pos);
}
}
}
return thePosQuene;
}
var con = $(“#con”);
//生成相关的二维数组
var baseWidth = 102;
var baseHeight = 102;
var base = {
width: baseWidth,
height: baseHeight
}