Новый пример каменной кладки Desandro, дающий мне "Uncaught ReferenceError: контейнер не определен"

Question

Я разрабатывал внештатный портфель веб-дизайна для своей компании. Который статичен на s3 @ http://drootech.com.s3-website-us-west-1.amazonaws.com/dtindex.html

Первоначально я настраивал старую версию кладки (используя jQuery/Javascript для создания адаптивного портфолио) с возможностью отфильтровывать различные типы контента по категориям (дизайн, проектирование и т. Д.)

Кажется, что он работает нормально, однако в консоли я получаю сообщение об ошибке "Uncaught ReferenceError: контейнер не определен"

Вот код:

$(function (){
var columns = 3,
    setColumns = function() { columns = $( window ).width() > 640 ? 3 : $(window).width() > 320 ? 2 : 1; };

setColumns();
$(window).resize(setColumns);
    var $container = $('#portfoliocontainer');
    $container.imagesLoaded(function(){
      var msnry = new Masonry( container, {
        itemSelector : '.item',
    columnWidth:  function( containerWidth ) { return containerWidth / columns;
    }
      });
});

});

Буду признателен за любую помощь или освещение ситуации, я не уверен, почему я получаю ошибку.

РЕДАКТИРОВАТЬ Я исправил ошибку с помощью следующего кода.

// responsive masonry function
$(function msnry(){
var columns = 3,
setColumns = function() { columns = $( window ).width() > 640 ? 3 : $(window).width() >    320 ? 2 : 1; };
setColumns();
$(window).resize(setColumns);

    // layout Masonry again after all images have loaded
    var $container = $('#portfoliocontainer').masonry();
    var msnry;
    $container.imagesLoaded( function(){
    var container = document.querySelector('#portfoliocontent')
    msnry = new Masonry( container, {
    itemSelector : '.item',
    columnWidth:  function( containerWidth ) { return containerWidth / columns;}
      });
});
$('.expandi').click(function(){
    $('.expand').slideDown('fast');
    $(this).siblings('ul').toggle();
});
$('.engineeringiC').click(function(){
    if($('div.item').hasClass('designshwr')){
    masonry.hide(($this));
    $container.masonry('reloadItems');
}
});
});
    $("#seemore").click(function (){
        //$(this).animate(function(){
            $('html, body').animate({
                scrollTop: $("#mrkting").offset().top - 85
                 }, 2000);
        //});
    });
    $("#home").click(function (){
        //$(this).animate(function(){
            $('html, body').animate({
                scrollTop: $(".masthead").offset().top - 85
                 }, 2000);
        //});
    });
$("#info").click(function (){
        //$(this).animate(function(){
            $('html, body').animate({
                scrollTop: $("#mrkting").offset().top - 85
                 }, 2000);
        //});
    });
    $("#portfolio").click(function (){
        //$(this).animate(function(){
            $('html, body').animate({
                scrollTop: $("#portfolioo").offset().top - 85
                 }, 2000);
        //});
    });
    $("#menui").click(function (){
        //$(this).animate(function(){
            $('#navbar').addClass('slicknav');
            $('#navbar').slideDown('fast');
        //});
    });
    $("#socialmedia").click(function (){
            $("#myModal").modal('show');
    });
  $(window).scroll(function(){
  if ($(this).scrollTop() > 1080) {
  $('#contentnav').fadeIn('fast');
  $('#contentnav').addClass('dynamicnav');
}
if ($(this).scrollTop() > 400) {
   $('#navbar').slideUp('fast');
   $('#navbarm').slideDown('fast');
} if ($(this).scrollTop() < 1080) {
   $('#contentnav').removeClass('dynamicnav');
}

});

То, что я пытаюсь сделать с кодом выше, когда вы нажимаете на div engineeringiC, это скрыть все, что имеет класс "designshwr".

$('.engineeringiC').click(function(){
    if($('div.item').hasClass('designshwr')){
    masonry.hide(($this));
    $container.masonry('reloadItems');
}
});

Но мне действительно тяжело заставить это работать. Есть мысли или предложения? PS Проигнорируйте функцию расширения, это то, что мне нужно переписать.