Prepend and Remove not working as expected

[vpascoal]

Hi!

Sorry for posting this here. I think is not an issue with masonry but prepend and remove methods are not working as I expected.
Please can you see this fiddle and read the issues in js box?

http://jsfiddle.net/vpascoal/3D2tP/

What I want to do is add items after green box (the green box is always in top left position - stamped) and remove items from the layout.

Thank you

[desandro]

Your JS code is actually okay. The problem is how the .green element is both a stamp and an item. To resolve this, I recommend not using the same class for that element. See http://jsfiddle.net/3D2tP/3/

To use prepended, you need to prepend the element, then use prepended Masonry method.

$container.prepend(b).masonry( 'prepended', b );

But there's another little bug to resolve. By default .black has display: none. When Masonry attempts to reveal it, it won't work as it will still be hidden. To fix this, I've added a class is-hidden to .black, then remove it for the cloned element. See http://jsfiddle.net/3D2tP/5/

This is indeed a bug which I'll keep an eye on in metafizzy/outlayer#13

[desandro]

I forgot to say

🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸
🔵🔵🔵🔵🔵🔸🔸🔵🔸🔸🔸🔵🔸🔸🔸🔸🔵🔸🔸🔸🔸🔵🔸🔸🔸🔵🔸🔸🔵🔸🔸🔸🔵
🔸🔸🔴🔸🔸🔸🔸🔴🔸🔸🔸🔴🔸🔸🔸🔴🔸🔴🔸🔸🔸🔴🔴🔸🔸🔴🔸🔸🔴🔸🔸🔴🔸
🔸🔸🔵🔸🔸🔸🔸🔵🔵🔵🔵🔵🔸🔸🔵🔸🔸🔸🔵🔸🔸🔵🔸🔵🔸🔵🔸🔸🔵🔵🔵🔸🔸
🔸🔸🔴🔸🔸🔸🔸🔴🔸🔸🔸🔴🔸🔸🔴🔴🔴🔴🔴🔸🔸🔴🔸🔸🔴🔴🔸🔸🔴🔸🔸🔴🔸
🔸🔸🔵🔸🔸🔸🔸🔵🔸🔸🔸🔵🔸🔸🔵🔸🔸🔸🔵🔸🔸🔵🔸🔸🔸🔵🔸🔸🔵🔸🔸🔸🔵
🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸
🔸🔸🔸🔸🔴🔸🔸🔸🔴🔸🔸🔸🔴🔴🔴🔸🔸🔸🔴🔸🔸🔸🔴🔸🔸🔴🔸🔸🔴🔸🔸🔸🔸
🔸🔸🔸🔸🔵🔸🔸🔸🔵🔸🔸🔵🔸🔸🔸🔵🔸🔸🔵🔸🔸🔸🔵🔸🔸🔵🔸🔸🔵🔸🔸🔸🔸
🔸🔸🔸🔸🔸🔴🔴🔴🔸🔸🔸🔴🔸🔸🔸🔴🔸🔸🔴🔸🔸🔸🔴🔸🔸🔴🔸🔸🔴🔸🔸🔸🔸
🔸🔸🔸🔸🔸🔸🔵🔸🔸🔸🔸🔵🔸🔸🔸🔵🔸🔸🔵🔸🔸🔸🔵🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸
🔸🔸🔸🔸🔸🔸🔴🔸🔸🔸🔸🔸🔴🔴🔴🔸🔸🔸🔸🔴🔴🔴🔸🔸🔸🔴🔸🔸🔴🔸🔸🔸🔸
🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸🔸

For

1. Submitting this bug
2. Providing a reduced test case
3. Being quite humble about it.

Very much appreciated!

[vpascoal]

Hi again! ;)

Can I change the animation of appending the black items?

http://jsfiddle.net/vpascoal/EVy6n/

The black items are not being shown in place where they will be at the end.
Right now they are coming from left to right.

I want to replicate this behavior:

http://codepen.io/desandro/pen/nhekz

Thank you

[desandro]

Yes! If you're using jQuery, I recommend appending a jQuery object.

    var $items = $();
    for (i = 0; i < 5; i++) {
        b = $("#black-item").clone().prop("id", "black-item-" + i).removeClass("is-hidden");
        $items = $items.add( b );

    }
    $container.append( $items ).masonry('appended',  $items );

See http://jsfiddle.net/EVy6n/7/