jQuery Isotope 垂直布局一开始没有格式化

如何解决jQuery Isotope 垂直布局一开始没有格式化

我使用 2 个 div 来显示“fitRows”布局（网格）或“垂直”（列表）布局。显然，我最终会在单独的网格中复制信息，我确信这并不理想。但我没有时间找出一种不那么重复的做事方式，这不是手头的实际问题。我的问题是，当我单击列表视图按钮时，列表会出现，但所有内容都折叠在其自身之上 - 没有格式。一旦我点击排序按钮，事情就会正确重置。但是当那个 div 最初出现时，它是一团糟。我猜它在某个地方的 js 中，但此时我的大脑受伤了。我希望这里有人能让我指出正确的方向。它几乎就在那里。但不是……完全。

注意：我还在一个单独的问题中问过是否可以结合过滤和排序。目前，就这个特定问题而言，这不是手头的问题。点击右上角的列表按钮出现这里要解决的问题

// Switch between grid & list views
            jQuery($ => {
                $('.showSingle').click(e => {
                    e.preventDefault();
                    
                    $('.content').hide();
                    let targetSelector = $(e.currentTarget).attr('href');
                    $(targetSelector).show();
                });
            });
            // end Switch between grid & list views
            
            
            
            
            // external js: isotope.pkgd.js
            // Isotope Grid View
            var $grid = $('#div1 .grid').isotope({
                itemSelector: '#div1 .portfolio-item',layoutMode: 'fitRows',getSortData: {
                    name: '.name',symbol: '.status',size: '.size parseInt',category: '[data-category]',weight: function( itemElem ) {
                        var weight = $( itemElem ).find('.weight').text();
                        return parseFloat( weight.replace( /[\(\)]/g,'') );
                    }
                }
            });
            
            // filter functions
            // bind filter button click
            $('#div1 #filters').on( 'click','button',function() {
                var filterValue = $( this ).attr('data-filter');
                // use filterFn if matches value
                filterValue = filterFns[ filterValue ] || filterValue;
                $grid.isotope({ filter: filterValue });
            });
                
            // bind sort button click
            $('#div1 #sorts').on( 'click',function() {
                var sortValue = $(this).attr('data-sort-value');
                $grid.isotope({ sortBy: sortValue });
            });
                
            // change is-checked class on buttons
            $('#div1 .btn-group').each( function( i,buttonGroup ) {
                var $buttonGroup = $( buttonGroup );
                $buttonGroup.on( 'click',function() {
                    $buttonGroup.find('.active').removeClass('active');
                    $( this ).addClass('active');
                });
            });
            // end Isotope Grid View
            
            
            
            
            // Isotope List View
            var $table = $('#div2 .table-like').isotope({
                layoutMode: 'vertical',symbol: '.symbol',number: '.number parseInt',category: '.category','') );
                    }
                }
            });
            
            // bind sort button click
            $('#div2 #sorts').on( 'click',function() {
                var sortValue = $(this).attr('data-sort-value');
                $table.isotope({ sortBy: sortValue });
            });
            
            // change is-checked class on buttons
            $('#div2 .button-group').each( function( i,function() {
                    $buttonGroup.find('.is-checked').removeClass('is-checked');
                    $( this ).addClass('is-checked');
                });
            });
            //end Isotope List View

.content {
  display: none;
}

#div1 {
  display: block;
}

/* Portfolio */
#div1 #isotope-sort-filter {
    position: relative;
    padding-top: 3rem;
}

#div1 .btn {
    display: inline-block;
    padding: 0.5em 1.0em;
    cursor: pointer;
    text-transform: uppercase;
}

#div1 .btn:hover {
    /*background-color: #8CF;
    color: #222;*/
}

#div1 .btn:active,#div1 .btn.is-checked {
    /*background-color: #28F;*/
}

#div1 .btn.is-checked {
    /*color: white;*/
}

#div1 .btn:active {
    /*Box-shadow: inset 0 1px 10px hsla(0,0%,0.8);*/
}

/* ---- button-group ---- */
#div1 .btn-group {
    padding-bottom: 2rem;
}

#div1 .btn-outline-primary {
    color: #32587d;
    border-color: #32587d;
    border-radius: 0;
}

#div1 .btn-outline-primary.active,#div1 .btn-outline-primary:active,#div1 .btn-group > .btn:hover {
    color: #fff;
    background-color: #32587d;
    border-color: #32587d;
}

/* ---- grid ---- */
#div1 .grid {
    /*border: 1px solid #333;*/
}

/* clear fix */
#div1 .grid:after {
    content: '';
    display: block;
    clear: both;
}

/* ---- .portfolio-item ---- */
#div1 .portfolio-item {
    position: relative;
    float: left;
    width: calc(25% - 20px);
    height: auto;
    padding: 1.25rem;
    background: #fff;
    color: #32587d;
    cursor: pointer;
    transition: background .5s ease-out;
    -moz-transition: background .5s ease-out;
    -webkit-transition: background .5s ease-out;
    -o-transition: background .5s ease-out;
}

#div1 .portfolio-item:nth-of-type(1):hover,#div1 .portfolio-item:nth-of-type(5):hover {
    background: #32587d;
    color: #fff;
}

#div1 .portfolio-item:nth-of-type(2):hover,#div1 .portfolio-item:nth-of-type(6):hover {
    background: #b5c1af;
    color: #fff;
}

#div1 .portfolio-item:nth-of-type(3):hover,#div1 .portfolio-item:nth-of-type(7):hover {
    background: #c88362;
    color: #fff;
}

#div1 .portfolio-item:nth-of-type(4):hover,#div1 .portfolio-item:nth-of-type(8):hover {
    background: #e0c094;
    color: #fff;
}

#div1 .portfolio-item > * {
    margin: 0;
}

#div1 .portfolio-item .state,#div1 .portfolio-item .city {
    font-size: 1rem;
    font-weight: 400;
    color: #32587d;
}

#div1 .portfolio-item:hover .state,#div1 .portfolio-item:hover .city {
    color: #fff;
}

#div1 .portfolio-item .city {
    padding-bottom: 1.25rem;
}

#div1 .portfolio-item .name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #32587d;
}

#div1 .portfolio-item:hover .name {
    color: #fff;
}

#div1 .portfolio-item .stores,#div1 .portfolio-item .store-size,#div1 .portfolio-item .Trade,#div1 .portfolio-item .acreage,#div1 .portfolio-item .status {
    font-size: 1rem;
    font-weight: 400;
    color: #5f5d5c;
}

#div1 .portfolio-item:hover .stores,#div1 .portfolio-item:hover .store-size,#div1 .portfolio-item:hover .Trade,#div1 .portfolio-item:hover .acreage,#div1 .portfolio-item:hover .status {
    color: #fff;
}

#div1 .portfolio-item .status {
    padding-bottom: 2rem;
    display: none;
}

#div1 .portfolio-item .visit a {
    color: #32587d;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: 400;
    padding-bottom: 2rem;
}

#div1 .portfolio-item .visit a:hover {
    opacity: .7;
}

#div1 .portfolio-item:hover .visit a {
    color: #fff;
}

/* List View */
#div2 .button {
  display: inline-block;
  padding: 0.5em 1.0em;
  margin-bottom: 10px;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom,hsla(0,0),0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  cursor: pointer;
}

#div2 .button:hover {
  background-color: #8CF;
  color: #222;
}

#div2 .button:active,#div2 .button.is-checked {
  background-color: #28F;
}

#div2 .button.is-checked {
  color: white;
}

#div2 .button:active {
  Box-shadow: inset 0 1px 10px hsla(0,0.8);
}

/* ---- button-group ---- */

#div2 .button-group:after {
  content: '';
  display: block;
  clear: both;
}

#div2 .button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

#div2 .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
#div2 .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }


/* ---- table-like ---- */

#div2 .table-like {
  background: #DDD;
  max-width: 1200px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* clear fix */
#div2 .table-like:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- vertical table-like ---- */

#div2 .table-like__item {
  width: 100%;
  clear: both;
  border-top: 1px solid;
}


#div2 .table-like__item > * {
  display: inline-block;
  padding: 4px 4px;
}

#div2 .table-like__item .name { width: 30%; }
#div2 .table-like__item .symbol { width: 10%; }
#div2 .table-like__item .weight { width: 15%; }
#div2 .table-like__item .number { width: 10%; }
#div2 .table-like__item .category { width: 20%; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>

<section id="content" class="container">
            <div class="row">
                <div class="col-10">
                    <p>You can sort our properties below by clicking on the buttons.</p>
                </div>
                
                <div class="col-2 d-flex">
                    <div class="d-grid gap-2 d-md-block ms-auto">
                        <a class="btn btn-primary showSingle float-right" href="#div1" data-bs-toggle="button" aria-pressed="true"><i class="fas fa-th-large"></i></a>
                        <a class="btn btn-primary showSingle float-right" href="#div2" data-bs-toggle="button" aria-pressed="false"><i class="fas fa-list"></i></a>
                    </div>
                </div>
            </div>
        </section>
        
        <div id="div1" class="content module in">
        
            <div id="isotope-sort-filter" class="container targetDiv" style="display:block;">
                
                <div class="row main-area">
                    <div class="col-12 col-md-6">
                        <h2 class="text-uppercase blue-text">Filter</h2>
                        <div id="filters" class="btn-group filter-by-button-group">
                            <button class="btn btn-outline-primary active" data-filter="*">show all</button>
                            <button class="btn btn-outline-primary" data-filter=".mall">malls</button>
                            <button class="btn btn-outline-primary" data-filter=".open">open air centers</button>
                        </div>
                    </div>
                    
                    <div class="col-12 col-md-6">
                        <h2 class="text-uppercase blue-text">Sort</h2>
                        <div id="sorts" class="btn-group sort-by-button-group">
                            <button class="btn btn-outline-primary active" data-sort-value="original-order">all centers by state</button>
                            <button class="btn btn-outline-primary" data-sort-value="name">by mall name</button>
                            <button class="btn btn-outline-primary" data-sort-value="size">by sq. ft. size</button>
                        </div>
                    </div>
                </div>
                
                <div class="row row-eq-height module">
                    <div class="grid">
                        <div class="portfolio-item mall" data-category="mall" onclick="location.href='#';">
                            <h3 class="state">AL</h3>
                            <p class="name">Parkway Place</p>
                            <p class="city">Huntsville</p>
                            <p class="stores">Number of Stores: 90</p>
                            <p class="store-size"><span class="size">643,135</span> sq. ft.</p>
                            <p class="Trade">Trade Area: 652,740</p>
                            <p class="acreage">Acreage: 34&#177;</p>
                            <p class="status">open</p>
                            <p class="visit"><a href="#">Visit this Property</a></p>
                        </div>
                        <div class="portfolio-item open" data-category="open" onclick="location.href='#';">
                            <h3 class="state">CA</h3>
                            <p class="name">Imperial Valley Mall</p>
                            <p class="city">El Centro</p>
                            <p class="stores">Number of Stores: 65</p>
                            <p class="store-size"><span class="size">826,094</span> sq. ft.</p>
                            <p class="Trade">Trade Area: 400,900</p>
                            <p class="acreage">Acreage: 157&#177;</p>
                            <p class="status">closed</p>
                            <p class="visit"><a href="#">Visit this Property</a></p>
                        </div>
                        <div class="portfolio-item open" data-category="open" onclick="location.href='#';">
                            <h3 class="state">FL</h3>
                            <p class="name">Hammock Landing</p>
                            <p class="city">West Melbourne</p>
                            <p class="stores">Number of Stores: 56</p>
                            <p class="store-size"><span class="size">562,681</span> sq. ft.</p>
                            <p class="Trade">Trade Area: 335,559</p>
                            <p class="acreage">Acreage: 108&#177;</p>
                            <p class="status">open</p>
                            <p class="visit"><a href="#">Visit this Property</a></p>
                        </div>
                        <div class="portfolio-item mall" data-category="mall" onclick="location.href='#';">
                            <h3 class="state">FL</h3>
                            <p class="name">The Pavilion at Port Orange</p>
                            <p class="city">Port Orange</p>
                            <p class="stores">Number of Stores: ??</p>
                            <p class="store-size"><span class="size">297,094</span> sq. ft.</p>
                            <p class="Trade">Trade Area: 525,353</p>
                            <p class="acreage">Acreage: ??</p>
                            <p class="status">closed</p>
                            <p class="visit"><a href="#">Visit this Property</a></p>
                        </div>
                        <div class="portfolio-item mall" data-category="mall" onclick="location.href='#';">
                            <h3 class="state">FL</h3>
                            <p class="name">Volusia Mall</p>
                            <p class="city">Daytona Beach</p>
                            <p class="stores">Number of Stores: 120</p>
                            <p class="store-size"><span class="size">844,193</span> sq. ft.</p>
                            <p class="Trade">Trade Area: 667,704</p>
                            <p class="acreage">Acreage: 90&#177;</p>
                            <p class="status">open</p>
                            <p class="visit"><a href="#">Visit this Property</a></p>
                        </div>
                        <div class="portfolio-item open" data-category="open" onclick="location.href='#';">
                            <h3 class="state">GA</h3>
                            <p class="name">Arbor Place</p>
                            <p class="city">Douglasville</p>
                            <p class="stores">Number of Stores: 125</p>
                            <p class="store-size"><span class="size">1,163,256</span> sq. ft.</p>
                            <p class="Trade">Trade Area: 851,814</p>
                            <p class="acreage">Acreage: 125&#177;</p>
                            <p class="status">closed</p>
                            <p class="visit"><a href="#">Visit this Property</a></p>
                        </div>
                        <div class="portfolio-item mall" data-category="mall" onclick="location.href='#';">
                            <h3 class="state">GA</h3>
                            <p class="name">The Landing at Arbor Place</p>
                            <p class="city">Douglasville</p>
                            <p class="stores">Number of Stores: 23</p>
                            <p class="store-size"><span class="size">162,954</span> sq. ft.</p>
                            <p class="Trade">Trade Area: 851,814</p>
                            <p class="acreage">Acreage: 44&#177;</p>
                            <p class="status">open</p>
                            <p class="visit"><a href="#">Visit this Property</a></p>
                        </div>
                        <div class="portfolio-item mall" data-category="mall" onclick="location.href='#';">
                            <h3 class="state">GA</h3>
                            <p class="name">The Outlet Shoppes at Atlanta</p>
                            <p class="city">Woodstock</p>
                            <p class="stores">Number of Stores: ??</p>
                            <p class="store-size"><span class="size">1,928,940</span> sq. ft.</p>
                            <p class="Trade">Trade Area: ??</p>
                            <p class="acreage">Acreage: ??</p>
                            <p class="status">closed</p>
                            <p class="visit"><a href="#">Visit this Property</a></p>
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
        <div id="div2" class="content">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 col-md-10">
        
                        <div id="sorts" class="button-group">
                            <button class="button is-checked" data-sort-value="original-order">original order</button>
                            <button class="button" data-sort-value="name">name</button>
                            <button class="button" data-sort-value="symbol">symbol</button>
                            <button class="button" data-sort-value="number">number</button>
                            <button class="button" data-sort-value="weight">weight</button>
                            <button class="button" data-sort-value="category">category</button>
                        </div>
                        
                        <ul class="table-like">
                            
                            <li class="table-like__item">
                                <div class="name">Mercury</div>
                                <div class="symbol">Hg</div>
                                <div class="number">80</div>
                                <div class="weight">200.59</div>
                                <div class="category">transition</div>
                            </li>
                            
                            <li class="table-like__item">
                                <div class="name">Tellurium</div>
                                <div class="symbol">Te</div>
                                <div class="number">52</div>
                                <div class="weight">127.6</div>
                                <div class="category">Metalloid</div>
                            </li>
                            
                            <li class="table-like__item">
                                <div class="name">Bismuth</div>
                                <div class="symbol">Bi</div>
                                <div class="number">83</div>
                                <div class="weight">208.980</div>
                                <div class="category">post-transition</div>
                            </li>
                            
                            <li class="table-like__item">
                                <div class="name">Lead</div>
                                <div class="symbol">Pb</div>
                                <div class="number">82</div>
                                <div class="weight">207.2</div>
                                <div class="category">post-transition</div>
                            </li>
                            
                            <li class="table-like__item">
                                <div class="name">Gold</div>
                                <div class="symbol">Au</div>
                                <div class="number">79</div>
                                <div class="weight">196.967</div>
                                <div class="category">transition</div>
                            </li>
                            
                            <li class="table-like__item">
                                <div class="name">Potassium</div>
                                <div class="symbol">K</div>
                                <div class="number">19</div>
                                <div class="weight">39.0983</div>
                                <div class="category">alkali</div>
                            </li>
                            
                            <li class="table-like__item">
                                <div class="name">sodium</div>
                                <div class="symbol">Na</div>
                                <div class="number">11</div>
                                <div class="weight">22.99</div>
                                <div class="category">alkali</div>
                            </li>
                            
                            <li class="table-like__item">
                                <div class="name">Cadmium</div>
                                <div class="symbol">Cd</div>
                                <div class="number">48</div>
                                <div class="weight">112.411</div>
                                <div class="category">transition</div>
                            </li>
                        </ul>
                        
                    </div>
                </div>
            </div>
            
        </div>