最近改视频监控页面，由于窗口比较多，以前是通过计算窗口大小位置来处理页面布局的，其实还是比较麻烦，而且偶尔会有页面位置错乱的现象，虽然只是及其偶尔的现象，但总归是不好。

计算窗口位置的代码：

/*监控窗口高度自动*/    web.gridHeight = function (num) {        var floorX = function(a, b){            var x = a / b;            x = Math.floor(x);            return x;        };                var a = $('#camera-wrap');        var b = num;        var c = $('#camera-wrap').height();        var wi = $('#camera-wrap').width();                var index = a.find('.camera-item.active').data('index');        if (index > b) {            a.find('.camera-item:first').click();        }                $.each(a.find('.camera-item'), function (i) {            var t = $(this);            if (i < b) {                t.hasClass("hidden") && t.removeClass("hidden");            } else {                t.hasClass("hidden") || t.addClass("hidden");            }        });                var d = a.find('.camera-item:visible');                var borderWi = 4;        if (b == '4') {            var bhe = floorX(c, 2);            var bwi = floorX(wi, 2);                        d.height(bhe - 30 - borderWi);            d.width(bwi - borderWi);        }        if (b == '6') {            var bhe = floorX(c, 3);            var bwi = floorX(wi, 3);                        a.find('.camera-item:first').height(bhe * 2 - 30 - borderWi - 1);            a.find('.camera-item:first').width(bwi * 2 - borderWi);                        a.find('.camera-item:visible:not(:first)').height(bhe - 30 - borderWi);            a.find('.camera-item:visible:not(:first)').width(bwi - borderWi);        }        if (b == '8') {            var bhe = floorX(c, 4);            var bwi = floorX(wi, 4);                        a.find('.camera-item:first').height(bhe * 3 - 30 - borderWi - 1);            a.find('.camera-item:first').width(bwi * 3 - borderWi);                        a.find('.camera-item:visible:not(:first)').height(bhe - 30 - borderWi);            a.find('.camera-item:visible:not(:first)').width(bwi - borderWi);        }        if (b == '16') {            var bhe = floorX(c, 4);            var bwi = floorX(wi, 4);                        d.height(bhe - 30 - borderWi);            d.width(bwi - borderWi);        }        if (b == '32') {            var bhe = floorX(c, 4);            var bwi = floorX(wi, 8);                        d.height(bhe - 30 - borderWi);            d.width(bwi - borderWi);        }    };

/*监控窗口全屏或还原*/    web.cameraFull = function (elem) {        var t = elem;        if (t.hasClass('fix')) {            t.removeClass('fix').attr('style', '').height(web.position.cameraH).width(web.position.cameraW);        } else {            web.position.cameraX = t.position().left;            web.position.cameraY = t.position().top;            web.position.cameraW = t.width();            web.position.cameraH = t.height();            t.addClass('fix').css({                'top': '5px',                'left': '5px',                'right': '0',                'bottom': '0',                'height': $('.container-center').height() - 5,                'width':$('.container-center').width()            });        }    };        web.position = {        cameraX: '0',        cameraY: '0',        cameraW: '0',        cameraH: '0',        gridsL: '0',        gridsR: '0'    };

 

效果

现在改页面样式，顺带改下实现布局的方案，改用css控制窗口的显示不显示，以及窗口显示的大小和位置

.realtime-page .content .center .videos .wind {    position: relative;    display: inline-block;    width: 50%;    height: 50%;    padding: 0 0.13rem 0.25rem 0.13rem;    box-sizing: border-box; }.realtime-page .content .center .videos.six .wind {    position: relative;    display: inline-block;    width: 33%;    height: 33%;    padding: 0 0.13rem 0.13rem 0.13rem;    box-sizing: border-box; }.realtime-page .content .center .videos.six .wind:nth-child(1) {    width: 66%;    height: 66%; }.realtime-page .content .center .videos.six .wind:nth-child(2) {    position: absolute;    top: 0;    left: 66%; }.realtime-page .content .center .videos.eight .wind {    position: relative;    display: inline-block;    width: 25%;    height: 25%;    padding: 0 0.13rem 0.13rem 0.13rem;    box-sizing: border-box; }.realtime-page .content .center .videos.eight .wind:nth-child(1) {    width: 75%;    height: 75%; }.realtime-page .content .center .videos.eight .wind:nth-child(2) {    position: absolute;    top: 0;    left: 75%; }.realtime-page .content .center .videos.eight .wind:nth-child(3) {    position: absolute;    top: 25%;    left: 75%; }.realtime-page .content .center .videos.sixteen .wind {    position: relative;    display: inline-block;    width: 25%;    height: 25%;    box-sizing: border-box;    padding: 0 0.13rem 0.13rem 0.13rem; }.realtime-page .content .center .videos.thirty-two .wind {    position: relative;    display: inline-block;    width: 12.5%;    height: 25%;    box-sizing: border-box;    padding: 0 0.13rem 0.13rem 0.13rem; }.realtime-page .content .center .videos.four .wind:nth-child(1n+5) {    display: none;}.realtime-page .content .center .videos.six .wind:nth-child(1n+7) {    display: none;}.realtime-page .content .center .videos.eight .wind:nth-child(1n+9) {    display: none;}.realtime-page .content .center .videos.sixteen .wind:nth-child(1n+17) {    display: none;}

 

这样一来逻辑上的控制就少了，让样式归样式，控制归控制，整体结构清晰了很多，而且css控制的样式没有出现过页面错乱的情况，完美。