css nth-child 的应用

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

计算窗口位置的代码：

/*监控窗口高度自动*/
    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控制的样式没有出现过页面错乱的情况，完美。

 

扫描二维码关注公众号，回复： 4632221 查看本文章