如何发现和填充同位素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); 

    });