javascript - 砌体 3.1.2 前置/附加

Question

无法向砌体添加元素...从页面开始的所有元素都可以正常工作。但是什么都没有添加......

   <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>

Answer 1

这是我环顾四周后想出的代码，但时间更长。

该项目必须附加/附加到容器中。然后必须告知砌体该项目已附加/前置。

我希望这有帮助。

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

Answer 2

是的，在这个最新版本中有点令人困惑。砌体上的“附加”方法只是触发新附加元素的布局，但这里是附加工作原理的示例：

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);

最重要的是每个新元素都存储在数组“elems”中。

这已经在https://tyxo.de/中进行了测试和操作。