Auto Adjust Blocks

HTML & Javascript

by Zuhaib Siddiqui

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<div id="row-wrap" class="row-wrap">
  <div class="dashboard-block">8</div>
	  <div class="dashboard-block">4</div>
	  
    <div class="dashboard-block">7</div>
	  <div class="dashboard-block">5</div>
    
	  <div class="dashboard-block">4</div>
	  <div class="dashboard-block">4</div>
	  <div class="dashboard-block">4</div>
	  
	  <div class="dashboard-block">12</div>
</div>

CSS

.dashboard-block{
	  padding:20px 10px;
	  border:1px solid #000;
	  text-align:center;
	  font-size:30px;
	  font-weight:bold;
	  margin-top:5px;
	  margin-bottom:5px;
	}
	.row-wrap{
	  padding:10px;
	}

JavaScript

// Variables
	var dashBlock =  $('.dashboard-block');
	var blockCounts = dashBlock.length;

	//var k = 1;
	// Set Id for Each
	$('.dashboard-block').each(function(i){
		
		var _incrmnt = i + 1;
		

		this.id = 'dashBlock_'+ _incrmnt;
		//this.id = k;
		// k++;
		
		//Condition
		switch(blockCounts){
			case 1:
					var arry = [12];
					$(this).addClass('col-md-'+arry[i]);
			break;
			case 2:
					var arry = [12,12];
					$(this).addClass('col-md-'+arry[i]);
			break;
			case 3:
					var arry = [8,8,12];
					$(this).addClass('col-md-'+arry[i]);
			break;
			case 4:
					var arry = [8,4,7,5];
					$(this).addClass('col-md-'+arry[i]);
			break;
			case 5:
					var arry = [8,4,7,5,12];
					$(this).addClass('col-md-'+arry[i]);
			break;
			case 6:
					var arry = [8,4,7,5,6,6];
					$(this).addClass('col-md-'+arry[i]);
			break;
			case 7:
					var arry = [8,4,7,5,6,6,12];
					$(this).addClass('col-md-'+arry[i]);
			break;
			case 8:
					var arry = [8,4,7,5,4,4,4,12];
					$(this).addClass('col-md-'+arry[i]);
			break;
		}

	});



	console.log('Dashboard Block = '+ $('.dashboard-block').length);