JQuery Filterizr не работает правильно с большим списком

Question

В моем приложении Asp.net MVC я использую Jquery и для фильтрации списка товаров.Отлично работает со списком товаров из 80-90 элементов.Но когда существует большой список товаров (250-300 товаров), возникает проблема с высотой страницы.

Например, когда фильтр не применяется, появляется 250 видимых товаров и страницаВысота очень высокая.Обычно, когда я нажимаю кнопку фильтра, количество видимых товаров составляет около 30, но высота страницы не меняется должным образом, а внизу страницы появляется огромный пробел.

Я пробовал несколько версий JQuery, ничего не меняет.

Я не знаю, является ли это ошибкой JQuery или я делаю что-то не так?

Вот мой код.

<script src=".../jquery-3.2.1.js"></script>
<script src=".../jquery.filterizr.min.js"></script>
<script src=".../products3.js"></script>

Вот содержимое product3.js:

$(document).ready(function () {

$('.filter-button').click(function () {
    $('.filter-div .filter-button').removeClass('active');
    $(this).addClass('active');
});

var filterizd = $('.filtr-container').filterizr({
    //options object
    delay: .1,
    filterOutCss: {
        opacity: 0,
        transform: 'scale(0.3)'
    },
    filterInCss: {
        opacity: 1,
        transform: 'scaleX(1)'
    }
});
});

А на html-странице я получаю список семейств продуктов и создаю кнопки фильтров:

<div class="bg-secondary-light p-2 mb-3 filter-div row m-0">
<div class="col-md-2">
    <h5 class="text-uppercase m-0" style="font-family:'Bebas Neue';font-size:30px;line-height:30px;margin-top:8px !important;">@GeneralHelper.ReturnRelatedCaption("leftmenu", "what-is-new") </h5>
</div>
<div class="col-md-10 mt-2">
    @{
        var refStr = GeneralHelper.ReturnRelatedCaption("keywords", "refKeyWord");
        var newIndicator = GeneralHelper.ReturnRelatedCaption("keywords", "new");
        var promoIndicator = GeneralHelper.ReturnRelatedCaption("keywords", "promo");

        var all = GeneralHelper.ReturnRelatedCaption("keywords", "all") + " (" + lstProducts.Count() + ")";

        <button id="btn-all-filter" class="btn-outline-default-second mb-1 active text-uppercase filter-button" data-filter="all">@all</button>

        List<int> lstFamilyIDs = lstProducts.Select(ro => ro.FamilyId.Value).Distinct().ToList();
        List<abwebfamille> subFamilies = ProductHelper.GetRelatedFamilies(lstFamilyIDs);

        foreach (var item in subFamilies)
        {
            <button class="btn-outline-default-second mb-1 text-uppercase filter-button" data-filter="@item.CodeFamWeb">

                @item.Designation

                <span>(@lstProducts.Where(ro => ro.FamilyId == item.CodeFamWeb).Count())</span>
            </button>
        }
    }
</div>

И я получаю список продуктов и создаю div продуктов:

<div class="row m-0">
<div class="col-md-2 d-none-only-sm p-0 pr-2">
    <a href="#">
        <img src="/CapronWebSite/Resources/Image/SiteImages/PubOrthesis.jpg" class="img-fluid w-100" alt="Sample Text">
    </a>
</div>

<div class="col-md-10 p-0">
    <div class="row m-0 filtr-container" id="divFamilyProducts">
        @foreach (var product in lstProducts)
        {
            <div class="col-lg-3 col-md-3 col-sm-6 filtr-item materialItem popupProduct" data-category="@product.FamilyId" data-toggle="modal">
                <div class="ih-item square effect6 bottom_to_top mt-5 border-secondary-1">
                    <a href="javascript:void(0);">
                        <div class="img">
                            <img src="@(string.Format(@"{0}/{1}.jpg", GeneralHelper.PhotoRootPath, product.PhotoPath))" class="img-fluid" alt="img">
                        </div>
                    </a>
                </div>
                <div class="d-flex flex-column mt-3">
                    <a href="javascript:void(0);" class="text-decoration-none text-center">
                        <small class="text-uppercase text-dark font-weight-bold dataName" data-name="@product.Name">@product.ShortName</small>
                    </a>
                    <small class="font-italic text-secondary dataRef text-center" data-ref="@product.RefNo">Réf. @product.RefNo</small>
                </div>
            </div>
        }
    </div>
</div>