Appended items in single column

[thomEpps]

Works great on initial page load for creating a masonry blog layout, but when clicking 'load more' (ajax-ing the new posts on to the page) the majority of new items all load in a single column.

Initialise colcade:

$(".js-masonry").colcade({
    columns: ".masonry-col",
    items: ".masonry-item"
});

Appending new items:

$(document).ajaxComplete(function () {
    function getItems() {
        var items = $(".js-masonry-items > *");
        return items;
    }
    $(".js-masonry").colcade("append", getItems());
});

[undersky0]

yep, same happens for me too

[DhivaharKannan]

yes, the majority of new items all load in a single column only runtime append

[vityapro]

Same here

[vityapro]

After some research, I figured out what was the problem. Issues in the flow of how the library calculates column height. So if you add an item directly from ajax request by default it's adding the height of the item which is 1 by default as innerHeight is undefined:

proto.layoutItem = function( item ) {
  // layout item by appending to column
  var minHeight = Math.min.apply( Math, this.columnHeights );
  var index = this.columnHeights.indexOf( minHeight );
  this.activeColumns[ index ].appendChild( item );
  // at least 1px, if item hasn't loaded
  // Not exactly accurate, but it's cool
  this.columnHeights[ index ] += item.offsetHeight || 1;
};

So if you got a couple of columns with a height difference of more than 1px you will get the issue) As it does not recalculate column height and adding 1 to its height
For example, you got inited columns with height: [100, 90, 110]
You appending 10 items. By the flow, it all will be added to the column with index 2 as it has the min height.
And after recalculation, you will have the next column heights: [100, 100, 110]
On the second iteration will append to the first and second columns.

[vityapro]

Adding static heights on the item's block a little bit helped.

[kenjibailly]

I'm having the same issue here. Tried to append one item at a time, but that didn't help either.

[laurence-trippen]

I know it's very hacky and not an optimal solution:

I just added a little setTimeout() of 200ms delay to trick the layout algorithm, and it works perfectly for me:

for (const photo of photos) {
  const galleryImage = createGalleryImage({
    thumbnailUrl: photo.thumbnail,
  });

  console.log('append image');

  setTimeout(() => {
    mainGalleryColcade.append(galleryImage);
  }, 200);
}