изотопный контейнер - показать по клику

Question

Я использую изотоп для создания фильтра. Но весь контейнер изотопа должен быть скрыт при начальной загрузке страницы, и посетителю придется щелкнуть по кнопке для отображения контейнера.

У меня работает фильтр, но когда вы нажимаете кнопку, при первом загрузке контейнера все предметы находятся друг на друге, тогда, когда вы нажимаете на один из фильтров, все встает на свои места.

Вы можете увидеть мой код здесь - http://chrsdev.com/test.html

Как я могу решить проблему всех элементов позиционирующих друг на друг на начальной загрузке содержимого?

Был бы очень признателен, если бы кто-то мог указать мне в правильном направлении.

Answer 1

Загрузите imagesloaded.js и добавьте скрипт на свою страницу. (Выгружено изображения могут скинуть макеты изотопных и вызвать пункт элементы перекрываться imagesLoaded решает эту проблему.)

Тогда звоните изотоп, как это:

//Initialize isotope on each container 
    jQuery.each($container, function (j) { 
    this.imagesLoaded(function() { 
     this.isotope({ 
      itemSelector : '.element-item' 
     }); 
    }); 
    }); 

ADDENDUM

Проблема с вашей каждой функцией и "это". Попробуйте это вместо этого.

//Initialize isotope on each container 
    jQuery.each($container, function (j) { 
    $container.imagesLoaded(function() { 
     $container.isotope({ 
      itemSelector : '.element-item' 
     }); 
    }); 
    });