Masonry With LazyLoad

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazyload/1.8.4/jquery.lazyload.js"></script>
<script src="https://cdn.jsdelivr.net/masonry/2.1.08/jquery.masonry.min.js"></script>
<div id="container" class="fluid">
  <div class="item">
    <div class="wrapper" style="width:100%;" id="rresim1">
      <div class="inner">
        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="http://keremtaspinar.com/images/1.jpg" id="resim1" />

      </div>

    </div>

  </div>
  <div class="item">
    <div class="wrapper " style="width:100%;" id="rresim2">
      <div class="inner">
        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="http://keremtaspinar.com/images/2.jpg" id="resim2" />
      </div>
    </div>
  </div>
  <div class="item">
    <div class="wrapper " style="width:100%;" id="rresim3">
      <div class="inner">
        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="http://keremtaspinar.com/images/3.jpg" id="resim3" />
      </div>
    </div>
  </div>
  <div class="item">
    <div class="wrapper " style="width:100%;" id="rresim4">
      <div class="inner">
        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="http://keremtaspinar.com/images/4.jpg" id="resim4" />
      </div>
    </div>
  </div>
  <div class="item">
    <div class="wrapper " style="width:100%;" id="rresim5">
      <div class="inner">
        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="http://keremtaspinar.com/images/5.jpg" id="resim5" />
      </div>
    </div>
  </div>

  <div class="item">
    <div class="wrapper " style="width:100%;" id="rresim6">
      <div class="inner">
        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="...

CSS

#container .wrapper {
  position: relative;
}

#container .wrapper> .inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#container.fluid .item {
  width: 24.5%;
  margin: 3px 0.0% 3px 0.0%;
  /*border: 1px solid grey;*/
}

#container.fluid .item img {
  /*display: none;*/
  display: block;
  width: 100%;
  height: auto !important;
  opacity: 1;
}

JavaScript

var yukseklik = $("#resim1").height();

$("html").find(".item").each(function(i) {
  resimSayisi = i + 1;
});


ekran = $(window).width();



for (i = 1; i <= resimSayisi; i++) {

  var newImg = new Image();
  newImg.src = $("#resim" + i).attr("data-original");
  var height = newImg.height;
  var width = newImg.width;
  if (height > width) {
    denklem = ((height * (ekran / 4)) / width) - 15;
  } else {
    denklem = ((height * (ekran / 4)) / width) - 5;
  }
  //denklem = ((height * (ekran / 4))/width)-15;

  degisken = "rresim" + i;
  document.getElementById(degisken).style.paddingBottom = denklem + "px"
}

var $container = $('#container');
$container.imagesLoaded(function() {
  $container.masonry({
    itemSelector: '.item',
    columnWidth: function(containerWidth) {
      return containerWidth / 12;
    }
  });
  $('.item img').lazyload({
    effect: 'fadeIn'
  });
  $('.item img').trigger('scroll');
});