Наполнение сайта снизу

by yoowordpress

HTML

<div class="wall">
  <a href="http://jsfiddle.net/yoowordpress/g0yLoe03/9/" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
  <a href="#" class="brick"></a>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.wall {
  overflow: hidden;
  transform: rotate(180deg);
}

.brick {
  width: 12%;
  height: 40px;
  // border: 1px solid black;
  margin: .2%;
  float: right;
  transform: rotate(180deg);
  box-sizing: border-box;
  background-color: #ab5555;
  -webkit-box-shadow: 0px 0px 7px 0px rgba(120, 54, 54, 1), 4px 1px 4px 1px rgb(51, 51, 51), 5px 0px 13px 3px rgb(74, 73, 82), 0px 16px 4px 18px rgba(143, 143, 143, 1);
  -moz-box-shadow: 0px 0px 7px 0px rgba(120, 54, 54, 1), 4px 1px 4px 1px rgb(51, 51, 51), 5px 0px 13px 3px rgb(74, 73, 82), 0px 16px 4px 18px rgba(143, 143, 143, 1);
  box-shadow: 0px 0px 7px 0px rgba(120, 54, 54, 1), 4px 1px 4px 1px rgb(51, 51, 51), 5px 0px 13px 3px rgb(74, 73, 82), 0px 16px 4px 18px rgba(143, 143, 143, 1);
  position: relative;
}

.block_row {
  clear: both;
}

@media (max-width: 767px) {
  .brick {
    width: 30%;
    margin: 1.2%;
  }
}

@media (min-width: 768px) and (max-width:991px) {
  .brick {
    width: 23%;
    margin: .8%;
  }
}

@media (min-width: 992px) and (max-width:1199px) {
  .brick {
    width: 18%;
  margin: .8%;
  }
}

JavaScript

function AnotherBrickInTheWall() {

  $('.wall').css('min-height', $(window).height());

  var $brick = $('.brick'),
    $window_width = $(window).width(),
    $brick_width = $brick.eq(0).width(),
    $colors = ['#ab5555', '#9c4e4e', '#9c4e4e', '#a25e5e', '#8a4747', '#8a4242', '#803030'],
    $brick_in_row = Math.floor($window_width / $brick_width),
    $brick_row = Math.ceil($('.brick').length / $brick_in_row),
    $block_row = $brick_in_row * 2 + 1,
    $block_count = Math.ceil($('.brick').length / $block_row),
    $width_delta = $window_width - ($brick_width * $brick_in_row),
    $margin = Math.floor($width_delta / $brick_in_row / 2);



  $i = 0;
  while ($i < $block_count) {
    $f = $i * $block_row + $brick_in_row;
    $l = $i * $block_row + $block_row - 1;

		//класс для ряда длинных кирпичей
    $start = $f - $brick_in_row;
    while ($start < $f) {
      $brick.eq($start).addClass('long');
      $start++;
    }
		
    //короткие кирпичи
    $brick.eq($l).css('width', $brick_width / 2);
    $brick.eq($f).css('width', $brick_width / 2);
    $i++;
  }

	//бэкграунд
  $brick.each(function(i) {
    var $rand = $colors[Math.floor(Math.random() * $colors.length)];
    $(this).css({
      'z-index': $brick.length - i,
      'background-color': $rand
    });
  });

 //выравнивание правого края
  $('.long').css({
    'margin-left': $margin,
    'margin-right': $margin
  })

}

AnotherBrickInTheWall();

$(window).resize(function() {
  $('.brick').removeAttr('style').removeClass('long');
  AnotherBrickInTheWall();
})