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

Question

我在我的图片库上实现了jquery同位素 在图库我有图像上传表格，用户上传图像后，我返回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'
        });
    });

它有效。

Answer 2

尝试

var $newItems = $('<div class="imgItem" style="float:left;"><a class="fancybox-button"....