JQuery фильтр - элементы не реорганизовать (изотоп)

Question

У меня есть страница, которая имеет структуру, как это:

<div id="k2Container"> <!--sets K2 Category Layout--> 
    <div class="itemList"> <!--Contains the items loaded--> 
     <div id="itemListLeading"></div> <!--contains one tile that is always first--> 
     <div id="itemListPrimary"></div> <!--contains the rest of the tiles--> 
    </div> 
</div> 

Плитка в itemListLeading имеет класс «ItemContainer синие» и плитка (ов) в itemListPrimary есть класс 'itemContainer red'. Фильтр ниже фильтрует элементы соответственно, но сетка не реагирует, и плитки не реорганизуются.

<ul id="filters"> 
    <li><a href="#" data-filter="*">All sizes</a></li> 
    <li><a href="#" data-filter=".red">Wide</a></li> 
    <li><a href="#" data-filter=".blue">High</a></li> 
    <li><a href="#" data-filter=".green">Small</a></li> 
</ul> 

<script> 
    $(function() { 
     var $container = $('#k2Container');  
     $container.isotope({ 
      itemSelector: '.itemContainer', 
      masonry: { 
       columnWidth: '#blank-item' 
      } 
     }); 

     $('#filters').on('click', 'a', function() { 
      var selector = $(this).data('filter'); 
      $container.isotope({ 
       filter: selector, 
       layoutMode: 'masonry' 
      }); 
     }); 

    }); 
</script> 

Конфигурация кладки в другом месте устанавливает ширину контейнера и т.д., которые я предполагаю, нужно вызвать только детали были отфильтрованы; однако я не знаю, как это сделать. Это может быть предоставлено по запросу, я просто не хочу распространять это со слишком большим количеством скриптов.

Update

Я думаю, что я нашел эту проблему, однако я не знаю, как изменить его. Когда страница загружена, сетка прекрасна. Стиль для плитки выглядит следующим образом.

style="position: absolute; left: 728px; top: 0px; width: 354px;" 

Очевидно, что «левый: 364px» приращения для каждой плитки, как это делает «главное: 0px» для каждой строки, но при применении фильтра моделирование это (для одной и той же плитки):

style="position: absolute; left: 728px; top: 0px; width: 354px; transform: translate3d(354px, 0px, 0px);" 

Если я удаляю «354px» из перевода 3d, плитки перестраиваются рядом друг с другом. Любые идеи относительно того, почему это генерируется?

Answer 1

И почему вы не хотите создавать один родительский элемент для сетки с элементами в качестве дочерних? Затем вы можете выполнять фильтрацию с фиксированным первым элементом. Добавьте класс «item-lead» для первого элемента, который должен быть исправлен, и добавьте selector+=", .item-lead"; после var selector = $(this).data('filter');.

Working example, forked on isotope default example

Простите, если я не полностью понимаю ваш вопрос, но я думаю, что мой метод проще, чем разделить сетку на две части. ;)