Javascript jqueryfilterizr不'；无法正确处理大量列表

在我的Asp.NETMVC应用程序中，我使用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>

在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>

@GeneralHelper.ReturnRelatedCaption（“leftmenu”，“what is new”）
@{
var refStr=GeneralHelper.ReturnRelatedCaption（“关键字”、“refKeyWord”）；
var newIndicator=GeneralHelper.ReturnRelatedCaption（“关键字”，“新”）；
var promoIndicator=GeneralHelper.ReturnRelatedCaption（“关键字”、“促销”）；
var all=GeneralHelper.ReturnRelatedCaption（“关键字”、“全部”）+”（“+lstProducts.Count（）+”）；
@全部
列出lstFamilyId=lstProducts.Select（ro=>ro.FamilyId.Value）.Distinct（）.ToList（）；
列表
@foreach（LST产品中的var产品）
{
Réf.@product.RefNo
}

---

你有没有找到解决问题的方法？我看到了类似的行为。没有，这是一个很好的工具，但它在大数据方面存在一些问题。我使用了同位素。很好，谢谢你的提示。我会尝试一下，看看它是否能处理Filterizr遇到的问题。

<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 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>