添加元素到同位素容器使圖像重疊

我已經在我的圖像庫上實現了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

添加元素到同位素容器使圖像重疊

回答

相關問題