jQuery addClass example

Change class name on click in jQuery

by Michael Mandarino

HTML

<div class="team-wrp">
    <div class="grid">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

SCSS

.grid {
    border: 1px solid #EA6E06;
    height: 420px;
    width: 620px;
    overflow: hidden;

    .box {
        box-sizing: border-box;
        float: left;
        background: pink;
        border: solid 4px white;
        height: 300px;
        width: 150px;
    }
}

JavaScript

$(document).ready(function () {
    var nb = 22; // Use JS to determine this.

    gridDimH = 420; //todo: switch to screen height available
    gridDimW = 620; //todo: switch to screen width available

    boxOrigH = 300; //todo: get image height
    boxOrigW = 150; //todo: get image width

    boxDimW = null; 
    boxDimH = null; 
    cols = null;
    rows = null;
    rest = null;

    //Computes the dimensions of the rendered grid
    function calculate(cols, nb){
        cols = cols;
        rows = Math.ceil(nb/cols);
        rest = nb % cols;
        boxDimW = gridDimW/cols;
        boxDimH = boxDimW * (boxOrigH/boxOrigW);

        if(boxDimW <= 1){
            console.log('Dimensions of the boxes are too small to be seen');
        }
        //Recurses if the height of the resulting grid is greater than the settings height
        if (boxDimH * rows > gridDimH) {
            calculate(cols + 1, nb);
        }
    }
    var cols = Math.ceil(Math.sqrt(gridDimW*nb/gridDimH));
    console.log ('start_cols: ' + cols);

    calculate(cols,nb); 

    $('.box').css({
    	'height': boxDimH,
    	'width':  boxDimW
    });
    var perRow = Math.ceil(nb/rows);
    console.log('per row: ' + perRow);
    
    if(perRow !== cols) {
    	boxDimH = gridDimH/rows;
      boxDimW = boxDimH * (boxOrigW/boxOrigH);
    }
    
    $('.grid').css({'width': perRow * boxDimW});
});