如何發現和填充同位素jQuery網格中的元素之間的空白空間？

Question

當使用perfectMasonry擴展由於元素的可變尺寸調整同位素中的元素時，它會創建一些空間。 如果創建了空白空間，每次有重新佈局時我都想用jquery進行檢查。 如果創建了它，我想插入一個新的元素，並在其他元素之間創建的間隙的大小填充空間。

我嘗試使用容器的父div的背景和一些css陰影框，使它看起來不錯，但沒有做到這一點。 我對 http://jsfiddle.net/TqVSs/ 使用的代碼（不能從GitHub這樣superMasonry是鏈接到perfectMasonry源的JavaScript box.Scroll下來找我的代碼）

$('#container').isotope({ 
layoutMode: "perfectMasonry", 
perfectMasonry: { 
     columnWidth: 0, 
     rowHeight: 125 
} 
})    



$('#container').delegate('.element', 'click', function(){ 
     if($(this).hasClass("dummy")==false){ 
      $(this).toggleClass('large'); 
      $('#container').isotope('reLayout'); 
     } 
    }); 

Answer 1

使用Packery！

包裝佈局旨在填補空白。 Packery也有great support for variable sizes。

Answer 2

我使用settimeout函數單擊事件後重新排序。 溶液低於

setTimeout(function(){ 
      $srid = $('.sonCalismalar .isler').packery({ 
       layoutMode: 'packery', 
       itemSelector: '.element-item' 
      }); 
      console.log("ok"); 
     },500); 

全碼低於

 $('.sonCalismalar nav').on('click', 'a', function() { 
     var filterValue = $(this).attr('data-filter'); 
     // use filterFn if matches value 
     // filterValue = filterFns[filterValue] || filterValue; 
     $grid.isotope({ filter: filterValue }); 

     //şimdi aktif 3. elementlerin margin rigth ını 0 yap 
     //.urunler .element-item .ucunculer { margin-right: 0px; }   
     setTimeout(function(){ 
      $srid = $('.sonCalismalar .isler').packery({ 
       layoutMode: 'packery', 
       itemSelector: '.element-item' 
      }); 
      console.log("ok"); 
     },500); 

    });