jquery - 将元素添加到同位素容器使图像重叠

Question

我已经在我的图片库中实现了 jquery isotope。
在图库中，我有图像上传表单，在用户上传图像后，我返回带有上传图像数据的 Json 对象。
根据该数据，我想将新图像添加到同位素容器中。
我尝试了几种方法，但都失败了。
最后一个将图像添加到容器中，但新图像位于旧图像下方。
我一定是错过了什么，但找不到什么。

$("#ajaxUploadForm").ajaxForm({
...
success: function (result) {
                var $container = $('#container');
                var $newItems = $('<div class="imgItem"><a class="fancybox-button" rel="fancybox-button" href="' + @Url.Content("~/") + result.messageOriginal+ '"> <img src="'+ result.message +'" /> </div></a>');

                $container.prepend($newItems).isotope('reloadItems').isotope({ sortBy: 'original-order' });
...

这是我在用户打开页面时加载项目的方式

$(window).load(function () {
        var $container = $('#container');

        $container.isotope({
            itemSelector: '.imgItem',
            filter: '*',

            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
...

这是每个项目的模板:

<div class="imgItem">
                <a class="fancybox-button" rel="fancybox-button" 
           href="@Url.Content("~/" + @i.Media.PathOriginal)" 
           >
                    <img src="@Url.Content("~/" + @i.Media.PathMedium)" alt="" />
                </a>
            </div>

Answer 1

我也遇到了同样的问题。所以我用它的图像加载插件包装它，如下

$('#container').imagesLoaded( function(){
        $('#container').isotope({
          // options
          sortBy : 'random',
          layoutMode: 'masonry',
          itemSelector : '.imgItem'
        });
    });

它成功了。