CODEWITHSUNDEEP
javascriptjquery
KernelCurry
KernelCurry

Reputation: 1297

Masonry 3.1.2 Prepend/Append

Un-able to add elements to masonry... All elements that start on the page work perfectly fine. But nothing is added....

   <script type="text/javascript">
        $(document).ready(function() {
            $('#container').masonry({
                itemSelector : '.image'
            });
            var msnry = $('#container').data('masonry');


            setInterval(function(){
                msnry.prepended('<div class="image"><div class="wrapper"><img class="img-responsive" src="http://placehold.it/623x834" />asd</div></div>');
            },1000);
        });
    </script>

Upvotes: 1

Views: 417

Answers (2)

KernelCurry
KernelCurry

Reputation: 1297

This is the code I came up with after looking around a but longer.

the item must be appended/prepended to the container. Then masonry must be told the item was appended/prepended.

I hope this helps.

var $element = $('<div class="item"><img src="http://placehold.it/200x300"</div>');
$container.prepend($element);
$container.imagesLoaded(function() {
    $container.masonry('prepended', $element);
});

Upvotes: 2

Oleg Popov
Oleg Popov

Reputation: 2514

Yeah it's a bit of confusing in this latest version. The 'appended' method on masonry just triggers layout of newly-appended elements, but here is the example how append works:

var projects = $('#projects'); 
var elems = []; 
var fragment = document.createDocumentFragment(); 

var elem = $('<div class="item">Here is new item</div>').get(0); 
fragment.appendChild(elem); 
elems.push(elem);
projects.appendChild(fragment); 
msnry.appended(elems);

The most important is every new element is stored in array 'elems'.

This is already tested and operational in https://tyxo.de/.

Upvotes: 0

Related Questions