变化的DIV

需求

这里写图片描述

实现如上页面，浏览器窗口的大小改变时，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;
        }
    }
}