DDP User Scroll

by andypotanin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<div class="grid">
  <div class="grid-item"><img src="https://graph.facebook.com/v2.5/1605400342810078/picture?width=600&height=900"></div>
  <div class="grid-item"><img src="https://graph.facebook.com/v2.5/1065869686817488/picture?width=600&height=900"></div>
</div>

CSS

.grid-item img {
  width: 200px;
}

.grid-item--width2 {
  width: 50%;
}

JavaScript

console.clear();
jQuery('.grid').isotope({
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});
var iso = $('.grid').data('isotope')

setTimeout(function() {

  var elem = jQuery('<div class="grid-item"><img src="https://graph.facebook.com/v2.5/10153993315741001/picture?width=800&height=550"></div>');
  jQuery('.grid').prepend(elem);
  console.log('elem', elem);
  iso.prepended(elem);
  iso.layout();

});