Need help with integration

[4li1985]

Hi Alexander.

I respect your work on getting lazysizes + isotope working together.

However I'm not able to get it working, since I'm noob in JS. I can only copy & paste code and use it as it is.

Below is my code. Lazyloading is working, but isotope/mansory layout is scrambled.

Is there any way you could help please?

<?php
foreach($filenames as $filename) {
      $getimagesize = getimagesize($_SERVER["DOCUMENT_ROOT"] .'/images/updates/'. $filename);	
?>

<div class="box" style="width:280px;">
<div style="position:relative;"><img data-src="/images/updates/<? echo filename; ?>"  width="<? echo $getimagesize[0]; ?>" height="<? echo $getimagesize[1]; ?>" class="lazyload"></div>
</div>
<?
}
?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="/js/jquery.isotope.min.js" ></script>
<script>
  $.Isotope.prototype._getCenteredMasonryColumns = function() {
    this.width = this.element.width();
    
    var parentWidth = this.element.parent().width();
    
                  // i.e. options.masonry && options.masonry.columnWidth
    var colW = this.options.masonry && this.options.masonry.columnWidth ||
                  // or use the size of the first item
                  this.$filteredAtoms.outerWidth(true) ||
                  // if there's no items, use size of container
                  parentWidth;
    
    var cols = Math.floor( parentWidth / colW );
    cols = Math.max( cols, 1 );

    // i.e. this.masonry.cols = ....
    this.masonry.cols = cols;
    // i.e. this.masonry.columnWidth = ...
    this.masonry.columnWidth = colW;
  };
  
  $.Isotope.prototype._masonryReset = function() {
    // layout-specific props
    this.masonry = {};
    // FIXME shouldn't have to call this again
    this._getCenteredMasonryColumns();
    var i = this.masonry.cols;
    this.masonry.colYs = [];
    while (i--) {
      this.masonry.colYs.push( 0 );
    }
  };

  $.Isotope.prototype._masonryResizeChanged = function() {
    var prevColCount = this.masonry.cols;
    // get updated colCount
    this._getCenteredMasonryColumns();
    return ( this.masonry.cols !== prevColCount );
  };
  
  $.Isotope.prototype._masonryGetContainerSize = function() {
    var unusedCols = 0,
        i = this.masonry.cols;
    // count unused columns
    while ( --i ) {
      if ( this.masonry.colYs[i] !== 0 ) {
        break;
      }
      unusedCols++;
    }
    
    return {
          height : Math.max.apply( Math, this.masonry.colYs ),
          // fit container to columns that have been used;
          width : (this.masonry.cols - unusedCols) * this.masonry.columnWidth
        };
  };
	
  $('#container').isotope({
	// options
	itemSelector: '.box',
	layoutMode: 'masonry',
  });
</script>

<script src="/js/lazysizes.min.js" ></script>