Javascript 页面内容更改时的布局问题

我在这里遇到了一个问题，我一直在尝试d/dx。我有一个清单页面的布局，css设置正确，可以正确显示。让我从html/php代码开始：

<div class='container-fluid second-row'>
        <div class='row' id='truckviewer-content'>
        </div>
        <div id="display">
        <div class='row content' id='content'>
            <div class='col-md-2 col-md-offset-2 page-title hidden-sm hidden-xs'>
                <h1 class='page-title-top'>Inventory</h1>
            </div>
            <div class='col-md-6'>
                <h3 class='page-sub-title'>Pick Your Rig</h3>
                <p>
                    Not only does Lone Mountain Truck Leasing provide a great selection of reliable semi trucks for sale, usually 3-5 years old, we also ensure your satisfaction because we encourage you to drive the truck off the lot for diagnostic evaluations and required inspections.
                </p>
                <p>
                    Our inventory includes fleets of semi trucks for sale, so take a look at just a few samples of our current inventory, and if you find something you like, give us a call toll-free at 866.512.5685, or contact us with the form below.
                </p>
            </div>
        </div>
        <div class='row'>
            <div class='col-md-10 col-md-offset-1'>
                <form class='form-inline center' role='form'>
                    <h3 class='inventory-sub-title'>Filters</h3>
                    <div class='form-group'>
                        <select id='yearFilter' class='filter form-control'>
                            <option value="allY" selected>-- year --</option>
                            <option value="2015">2015</option>
                            <option value="2014">2014</option>
                            <option value="2013">2013</option>
                            <option value="2012">2012</option>
                            <option value="2011">2011</option>
                            <option value="2010">2010</option>
                            <option value="2009">2009</option>
                            <option value="2008">2008</option>
                            <option value="2007">2007</option>
                        </select>
                    </div>
                    <div class='form-group'>
                        <select id='makeFilter' class='filter form-control'>
                            <option value="allM" selected>-- Make --</option>
                            <option value="freightM">Freightliner</option>
                            <option value="intM">International</option>
                            <option value="kenM">Kenworth</option>
                            <option value="mackM">Mack</option>
                            <option value="peteM">Peterbilt</option>
                            <option value="volvoM">Volvo</option>
                        </select>
                    </div>
                    <div class='form-group'>
                        <select  id='engineFilter' class='filter form-control'>
                            <option value="allE" selected>-- Engine --</option>
                            <option value="catE">Caterpillar</option>
                            <option value="cumE">Cummins</option>
                            <option value="detE">Detroit</option>
                            <option value="mackE">Mack</option>
                            <option value="volE">Volvo</option>
                        </select>
                    </div>
                    <div class='form-group'>
                        <select id='transFilter' class='filter form-control'>
                            <option value="allT" selected>-- Transmission --</option>
                            <option value="10T">10 Speed</option>
                            <option value="13T">13 Speed</option>
                            <option value="18T">18 Speed</option>
                            <option value="autoT">Auto</option>
                        </select>
                    </div>
                    <div class='form-group'>
                        <select id='apuFilter' class='filter form-control'>
                            <option value="allA" selected>-- APU --</option>
                            <option value="apuYes">Yes</option>
                            <option value="apuNo">No</option>
                        </select>
                    </div>
                    <a href="" id="showAll">Show All</a>
                </form>
            </div>
        </div>
            <?
                $truckorder = file_get_contents("truckorder.tpl");
                $truckorder = preg_replace('/\s+/', ' ', trim($truckorder));
                $tagname = "truckorder";
                $trucks = parseContent($truckorder, $tagname);
                $trucks = explode("|", $trucks); 
                foreach($trucks as $truck){
                    $truck = preg_replace('/\s+/', ' ', trim($truck));
                    $quickview = file_get_contents("groups/group_$truck/content/quickview.tpl");
                    $quickview = preg_replace('/\s+/', ' ', trim($quickview));              
                    $tagname = "quickfilter";
                    $filter = parseContent($quickview, $tagname);
                    $tagname = "quicktitle";
                    $title = parseContent($quickview, $tagname);
                    $tagname = "quickprice";
                    $price = parseContent($quickview, $tagname);
                    $tagname = "quicklook";
                    $specs = parseContent($quickview, $tagname);
                    $detailview = file_get_contents("groups/group_$truck/content/detailview.tpl");
                    $detailview = preg_replace('/\s+/', ' ', trim($detailview));
                    $tagname = "trucks";
                    $params = parseContent($detailview, $tagname);
                    $param = explode("|", $params);
                    $param1 = $param[0];
                    $param2 = $param[1];
                    $param3 = $param[2];
                    $param4 = $param[3];
                    $instock = getTruckTotals($param2,$param3,$param4);
                ?>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 truck<?=$filter?>">
                    <div class="item ">
                        <p class='truck-img-align'>
                            <img class="truckTip" src="groups/group_<?=$truck?>/photos/quicktruck.png" border="no-border" />
                        </p>
                        <a class='ajax ajax-main' data-price="<?=$price?>" data-title="<?=$title?>" data-stock="<?=$instock?>" data-truck="<?=$truck?>" href="detail/?id=<?=$truck?>"><div class="caption"><h4>Quick Look</h4><?=$specs?></div></a>
                    </div>
                        <h3 class='truck-title'><?=$title?></h3>
                        <h3 class='truck-price'><?=$price?></h3>
                        <p  class='in-stock'><?=$instock?></p>
                        <a class='ajax bottom-link' data-price="<?=$price?>" data-title="<?=$title?>" data-stock="<?=$instock?>" data-truck="<?=$truck?>" href="detail/?id=<?=$truck?>">Click or hover for more details</a>
                </div>
                <?
                }
                ?>
            </div>
    </div>

---

有了上述所有信息，是时候切入正题了。我想弄清楚的是，我该如何修改它，使系统足够智能，能够确定清单页面上显示了多少个对象，然后在此基础上计算出一个漂亮的css表。我几乎在考虑从一开始就这么做。然后也根据页面宽度计算它。这可能是一个太大的问题，无法在这里发布。我不确定，我在这里的帖子里还是个傻瓜。如果有人有想法，尽管告诉我。如果你认为我应该巩固和缩小这个问题，让我知道，以及我可以解决问题的方式。我想把我的大脑和这里的人放在一起，这样我就可以找到这个问题的根源。希望不久能收到一些人的来信

解决了这个问题，我需要将两个循环合并为一个循环，并使用if语句中的选项来确定类应该去哪里

function sortDisplay(){
    var count = 0;
    var vizCount = 0;
    if($(window).width() > 1200){
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');     
                if((count == 0 || vizCount%4 == 0) && $(this).is(':visible')){
                        $(this).addClass('view-sort-left');
                        vizCount++;
                }else if((count == 3 || vizCount%4 == 3)&& $(this).is(':visible')){
                        $(this).addClass('view-sort-right');
                        vizCount++;
                }else if($(this).is(":visible")){
                    vizCount++;
                }
            count++;
        });
    }else if($(window).width() <= 1200 && $(window).width() > 992){
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');     
                if((count == 0 || vizCount%3 == 0) && $(this).is(':visible')){
                        $(this).addClass('view-sort-left');
                        vizCount++;
                }else if((count == 2 || vizCount%3 == 2)&& $(this).is(':visible')){
                        $(this).addClass('view-sort-right');
                        vizCount++;
                }else if($(this).is(":visible")){
                    vizCount++;
                }
            count++;
        }); 
    }else{
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');
        });
    }
}

$(window).resize(function(){
    sortDisplay();
})

.truck{
    width: 16%;
    margin-left: 1%;
    margin-right: 1%;
    min-height: 350px;
    margin-top: 25px;
}
.view-sort-left{
    margin-left: 14% !important;
}

.view-sort-right{
    margin-right: 14% !important;
}

.truck-reset:nth-child(4n-1){
    margin-left: 14%;
}

function sortDisplay(){
    var count = 0;
    var vizCount = 0;
    if($(window).width() > 1200){
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');     
                if((count == 0 || vizCount%4 == 0) && $(this).is(':visible')){
                        $(this).addClass('view-sort-left');
                        vizCount++;
                }else if((count == 3 || vizCount%4 == 3)&& $(this).is(':visible')){
                        $(this).addClass('view-sort-right');
                        vizCount++;
                }else if($(this).is(":visible")){
                    vizCount++;
                }
            count++;
        });
    }else if($(window).width() <= 1200 && $(window).width() > 992){
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');     
                if((count == 0 || vizCount%3 == 0) && $(this).is(':visible')){
                        $(this).addClass('view-sort-left');
                        vizCount++;
                }else if((count == 2 || vizCount%3 == 2)&& $(this).is(':visible')){
                        $(this).addClass('view-sort-right');
                        vizCount++;
                }else if($(this).is(":visible")){
                    vizCount++;
                }
            count++;
        }); 
    }else{
        $(".truck").each(function(){
            $(this).removeClass('view-sort-left');
            $(this).removeClass('view-sort-right');
        });
    }
}

$(window).resize(function(){
    sortDisplay();
})