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

我已经在我的图像库上实现了jquery同位素。
在图库中我有图像上传表单，用户上传图像后我返回Json对象与关于上传图像的数据。
基于这些数据我想添加新的图像到同位素容器。
我尝试了几种方法，但都失败了。
最后一个将图像添加到容器，但新图像在旧图像的下方。
我必须错过一些东西，但找不到什么。
enter image description here 添加元素到同位素容器使图像重叠

$("#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>

来源

2012-09-15 1110

当您将新项目追加（添加）到同位素的容器时，同位素需要项目的宽度和高度来正确布置它们。请参阅imagesLoaded选项以及如何使用Ajax加载和附加新项目。 – Systembolaget

尝试用

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

来源

2012-09-15 12:51:29 Gautam3164

这是行不通的:( – 1110

我面临同样的问题。所以我用它的图像加载插件包装它如下

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

它的工作。

来源

2013-05-24 16:23:52

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

回答

相关问题