infinite ajax scroll + masonry + imagesloaded

[aydcery]

this code is working fine , but sometimes leaving a gap , like this

and this is my code ;

var container = document.querySelector('#container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container, {
    itemSelector : '.box',
    isFitWidth: true,
    columnWidth: 236,
    gutter: 14
});
$('#loading').hide();
});

var ias = $.ias({
  container: "#container",
  item: ".box",
  pagination: ".page-links-list",
  next: ".page-next",
  delay: 0,
  negativeMargin: 200
});

ias.on('render', function(items) {
  $(items).css({ opacity: 0 });
});

ias.on('rendered', function(items) {
imagesLoaded( container, function() {
msnry.appended(items);
});
});

ias.extension(new IASSpinnerExtension());

Thanks in advance.

[aydcery]

I think something wrong in this part

ias.on('rendered', function(items) {
imagesLoaded( container, function() {
msnry.appended(items);
});
});

[Scumtron]

ias.on('rendered', function(items) {
var $el = $(items);
var $container = $('.content');
$el.imagesLoaded(function() {
$container.masonry('appended', $el);
});
});

[fieg]

Hi @aydcery, did you work this out with the help of @Scumtron?

[aydcery]

@fieg Yes I did but it's not working :(

[gmuehl]

Same Problem over here, strange thing is, that the gap only occurs once in a while !?

[katielacy]

Hey guys I had the same problem.

If you use the same container for IAS and Masonry it will cause this space the best solution is to put a wrapper around all of your items like so.....

`

// Masonry Container

// ajax scroll container

your ajax scroll items

your ajax scroll items

your ajax scroll items

your ajax scroll items

your ajax scroll items

etc........

`

[fieg]

I think the gaps are caused because the images don't have a fixed height and are sometimes loaded after IAS. Therefor some offsets are calculated incorrect. Can someone verify this by trying to set fixed heights?

[fieg]

Closing due to no response.