I'm integrating MeteorJS collection with Packer for a Pinterest-like interface.
I'm having an issue that when a new item is added to the collection which is rendered by Packery (or Masonry, same issue), the new item just floats on top left of the container, and is not run through the Packery layout processor.
triggerMasonryLayout = function () {
var $container = $('#masonry-layout');
console.log("AUTORUN PACKERY", $container);
$container.packery({
itemSelector: '.item',
gutter: 20,
columnWidth: 300
});
$container.packery();
}
Template.bookingsProfileItem.onRendered( function() {
triggerMasonryLayout();
});
<template name="bookingsProfileItem">
<div class="item">
...
<div id="masonry-layout">
{{#each properties}}
{{> bookingsProfileItem}}
{{/each}}
</div>