需求
這里寫圖片描述
實(shí)現(xiàn)如上頁面给涕，瀏覽器窗口的大小改變時(shí)，view的大小隨之改變，使得頁面中不出現(xiàn)橫向的滾動(dòng)條够庙；頁面中的view是可以進(jìn)行拖動(dòng)的恭应，這種拖動(dòng)不是位置的互換，可以將view拖動(dòng)到任何位置耘眨；頁面中的view大小是可以發(fā)生改變的昼榛。
設(shè)計(jì)思路
構(gòu)建一個(gè)畫布，畫布是有一個(gè)個(gè)正方形格子來組成的剔难，畫布的左上角是坐標(biāo)的原點(diǎn)胆屿，向右是x軸正方向，向下是y軸正方向偶宫；每個(gè)view都有自己對(duì)應(yīng)的坐標(biāo)點(diǎn)非迹，根據(jù)坐標(biāo)點(diǎn)去擺放位置，利用view的寬度和高度來計(jì)算一行的view是否放滿纯趋，需要進(jìn)行換行的擺放憎兽；每一個(gè)veiw都采用絕對(duì)定位的方式。
style {
position: absolute;
left:
top:
}
實(shí)現(xiàn)
1结闸、畫布構(gòu)建
//利用一個(gè)二維數(shù)組當(dāng)做模型唇兑，y是一列縱向格子的總數(shù)，x是一行橫向格子的總數(shù)
//其實(shí)就是canvas數(shù)組保存所有的坐標(biāo)點(diǎn)
var canvas = [y][x];
//初始化數(shù)組桦锄，使得每一個(gè)格子的只都為0
//0代表此處沒有view扎附，1表示此處有view
canvas = 0;
2、view的保存
//view的模型结耀，保存view的坐標(biāo)留夜，寬度和高度
var view1 = {
posX:0,
posY:0,
width:100px;
height:100px;
};
var view2 = {
posX:2,
posY:1,
width:100px;
height:50px;
};
//使用一個(gè)數(shù)組保存所有的view,當(dāng)view的位置發(fā)現(xiàn)變化時(shí)，更新viewArray
var viewArray = [];
viewArray.push(view1);
viewArray.push(view2);
3图甜、view位置的計(jì)算和更新
① 瀏覽器窗口大小改變
var cellWidth = cellHeight = 100px;
//獲取瀏覽器大小改變比例
var widthPro = (|(oldCanvasWidth-newCanvasWidth|*0.1)/oldCanvasWidth;
var heightPro = (|(oldCanvasHeight-newCanvasHeight|*0.1)/oldCanvasHeight;
//每一個(gè)view的新大小
var viewWidth = odlViewWidth * (|1-widthPro|);
var viewHeight = oldViewHeight * (|1-heightPro|);
//計(jì)算坐標(biāo)
updateViewPos();
//設(shè)置屬性
style {
left: posX*cellWidth+viewWidth;
top: posY*cellHeight+viewHeight;
}
② view拖動(dòng)
cellArray[][] = 0;
//通過html拖動(dòng)事件可以獲取碍粥，獲取到被拖動(dòng)的view、拖動(dòng)到的index和拖動(dòng)到的index上的view;
var dragedView黑毅；
var dragedIndex;
var dropedView;
//將dropedView的坐標(biāo)賦給dragedView
dragedView.posX = dropedView.posX;
dragedView.posY = dropedView.posY;
//為了坐標(biāo)重復(fù)講dropedView的橫坐標(biāo)加一;
dropedView.posX++;
//改變viewArray中dragedView的位置
viewArray.remove(dragedView);
viewArray.insert(dragedView, dragedIndex);
//計(jì)算坐標(biāo)
updateViewPos();
//設(shè)置屬性
style {
left: posX*cellWidth+viewWidth;
top: posY*cellHeight+viewHeight;
}
③ view大小改變
cellArray[][] = 0;
//獲取改變大小的view
var resizeView
//更新viewArray
viewArray.update(resizeView);
//計(jì)算坐標(biāo)
updateViewPos();
//設(shè)置屬性
style {
left: posX*cellWidth+viewWidth;
top: posY*cellHeight+viewHeight;
}
④ 計(jì)算坐標(biāo)
function updateViewPos() {
//如果當(dāng)前坐標(biāo)的值為1嚼摩，先將x軸坐標(biāo)加1
while(1 == cellArray[view.posY][view.posX]) {
view.posX++;
//X軸放不下的情況將x坐標(biāo)置零，y軸坐標(biāo)加1
if(view.posX > (canvas.width-view.width)) {
view.posX = 0;
view.posY++;
}
//Y軸放不下的情況矿瘦，擴(kuò)大canvas容量
if(view.posY > (canvas.height - view.height)) {
var row = [x];
canvas.push(row );
}
}
//將view占的格子的值設(shè)置為1
for(var i = view.posY; i < canvas.heigth/cellHeight ; i++) {
for(var j = view .posX; j < canvas.width/cellWidth ; j++) {
canvas[i][j] = 1;
}
}
}
