Masonry - Scroll to clicked element on layout -infinite - jquery-masonry

Question

I am trying to do 2 actions on one click on the element using Masonry library. It should work the way that when I click on the element it expands (I am adding class to have box bigger) and in the meantime the page is scrolling to that box. The problem is that when you expand the box it may drop a line down and that means the function called to scroll will scroll to wrong place. It should do the layout and get new position of the element and then move...
I got it almost working. It is expanding the box and doing new layout and when finished it scrolls the page to the box... but it looks a little bit strange and it first moves all the boxes for new layout, then stops and strars moving the page. I would prefer that to be done in one move. It that possible.
Here is my code:
$(document).ready(function() {
var $container = $('#container');
// initialize
var msnry = new Masonry( container, {
columnWidth: 280,
itemSelector: '.item'
} );
$('.openBoks').on('click', function() {
// this is my element
var thisBox = $(this).parent().parent();
// adding the class to expand it
thisBox.addClass('opened');
// calling method to do new layout
msnry.layout();
msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems )
{
$('html, body').animate({
scrollTop: (thisBox.offset().top-10)
}, 700);
return true;
});
});
});

Answer 1

In case you or someone else is still looking for an answer to this, I did a little workaround this problem. The idea was basically the same, to do the scroll and the masonry repositioning simultaneously. It's not the most elegant solution since I added a couple of lines inside the masonry script.
Inside masonry.pkgd.js, there is a function _processLayoutQueue that positions the masonry items stored in the queue array, calling the _positionItem for each of the items.
Outlayer.prototype._processLayoutQueue = function( queue ) {
for ( var i=0, len = queue.length; i < len; i++ ) {
var obj = queue[i];
this._positionItem( obj.item, obj.x, obj.y, obj.isInstant );
}
};
What I did was check through the iteration for the item with the identifying masonry class, in your case ".opened". So when that item is found, I immediately activate the page scroll using a cointainer div ("#container_div_id" for this example) for the offset and adding the items "y" position (obj.y). At the end, the code looks something like this:
Outlayer.prototype._processLayoutQueue = function( queue ) {
for ( var i=0, len = queue.length; i < len; i++ ) {
var obj = queue[i];
this._positionItem( obj.item, obj.x, obj.y, obj.isInstant );
/* ADDED CODE */
if( $(obj.item.element).hasClass('opened')){
$('html, body').animate({
scrollTop: $('#container_div_id').offset().top+obj.y
}, 600);
}
/* END OF ADDED CODE */
}
};
This makes the scrolling start right after the positioning of the item, without having to wait for the layoutComplete event. As I said, its not the most elegant solution, but it is pretty solid, It works fine for my case.
Hope it helps someone!