需求
这里写图片描述
实现如上页面，浏览器窗口的大小改变时，view的大小随之改变，使得页面中不出现横向的滚动条；页面中的view是可以进行拖动的，这种拖动不是位置的互换，可以将view拖动到任何位置；页面中的view大小是可以发生改变的。
设计思路
构建一个画布，画布是有一个个正方形格子来组成的，画布的左上角是坐标的原点，向右是x轴正方向，向下是y轴正方向；每个view都有自己对应的坐标点，根据坐标点去摆放位置，利用view的宽度和高度来计算一行的view是否放满，需要进行换行的摆放；每一个veiw都采用绝对定位的方式。
style {
position: absolute;
left:
top:
}
实现
1、画布构建
//利用一个二维数组当做模型，y是一列纵向格子的总数，x是一行横向格子的总数
//其实就是canvas数组保存所有的坐标点
var canvas = [y][x];
//初始化数组，使得每一个格子的只都为0
//0代表此处没有view，1表示此处有view
canvas = 0;
2、view的保存
//view的模型，保存view的坐标，宽度和高度
var view1 = {
posX:0,
posY:0,
width:100px;
height:100px;
};
var view2 = {
posX:2,
posY:1,
width:100px;
height:50px;
};
//使用一个数组保存所有的view,当view的位置发现变化时，更新viewArray
var viewArray = [];
viewArray.push(view1);
viewArray.push(view2);
3、view位置的计算和更新
① 浏览器窗口大小改变
var cellWidth = cellHeight = 100px;
//获取浏览器大小改变比例
var widthPro = (|(oldCanvasWidth-newCanvasWidth|*0.1)/oldCanvasWidth;
var heightPro = (|(oldCanvasHeight-newCanvasHeight|*0.1)/oldCanvasHeight;
//每一个view的新大小
var viewWidth = odlViewWidth * (|1-widthPro|);
var viewHeight = oldViewHeight * (|1-heightPro|);
//计算坐标
updateViewPos();
//设置属性
style {
left: posX*cellWidth+viewWidth;
top: posY*cellHeight+viewHeight;
}
② view拖动
cellArray[][] = 0;
//通过html拖动事件可以获取，获取到被拖动的view、拖动到的index和拖动到的index上的view;
var dragedView；
var dragedIndex;
var dropedView;
//将dropedView的坐标赋给dragedView
dragedView.posX = dropedView.posX;
dragedView.posY = dropedView.posY;
//为了坐标重复讲dropedView的横坐标加一;
dropedView.posX++;
//改变viewArray中dragedView的位置
viewArray.remove(dragedView);
viewArray.insert(dragedView, dragedIndex);
//计算坐标
updateViewPos();
//设置属性
style {
left: posX*cellWidth+viewWidth;
top: posY*cellHeight+viewHeight;
}
③ view大小改变
cellArray[][] = 0;
//获取改变大小的view
var resizeView
//更新viewArray
viewArray.update(resizeView);
//计算坐标
updateViewPos();
//设置属性
style {
left: posX*cellWidth+viewWidth;
top: posY*cellHeight+viewHeight;
}
④ 计算坐标
function updateViewPos() {
//如果当前坐标的值为1，先将x轴坐标加1
while(1 == cellArray[view.posY][view.posX]) {
view.posX++;
//X轴放不下的情况将x坐标置零，y轴坐标加1
if(view.posX > (canvas.width-view.width)) {
view.posX = 0;
view.posY++;
}
//Y轴放不下的情况，扩大canvas容量
if(view.posY > (canvas.height - view.height)) {
var row = [x];
canvas.push(row );
}
}
//将view占的格子的值设置为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;
}
}
}
