Javascript 使用视图重新调整窗口大小的挑战

这是我的困境，我有两个视图，在切换上可以很好地工作，我有同位素视图和砖石视图，这很好。挑战是让砖石视图根据视图端口重新调整某些图像的大小，这是我使用下面的代码做的

$(function(){

  var $container = $('#container');
  // add randomize the size of images on the selected class//
  $container.find('.element').each(function(){
    var $this = $(this),
        number = parseInt( $this.find('.number').text(), 10);           

    if (number  % 1 === 0 ){$this.addClass('width2');}

        if (window.matchMedia("(max-width: 599px)").matches) { 
            if ( number   % 5 === 3) {
                $this.addClass('height2');}
            }
        if (window.matchMedia("(min-width: 600px) and (max-width:1023px)").matches) { 
            if ( number %12   % 5 === 2) {
                $this.addClass('height2');}
            }
        if (window.matchMedia("(min-width: 1024px)").matches) { 
            if ( number %10   % 10 === 5)  {
                $this.addClass('height2');}                 
            }
    }); 

我通过使用下面的公式为元素指定一个数字来实现这一点

var $l = document.getElementsByClassName("number");
        for(i=0; i < 40; i++){ $l[i].innerHTML = i + 1;} 

var$l=document.getElementsByClassName（“编号”）；
对于（i=0；i<40；i++）{$l[i].innerHTML=i+1；}

它向类“number”添加一个数字，我使用顶部代码返回该数字，并使用模数将类分配给返回的数字

所有这些都很好，如果我在我的代码中以给定的大小打开一个浏览器窗口，那么类将被添加到指定的数字范围中，现在我的问题是我必须在窗口重新调整大小方面做这项工作，这正是我遇到的问题，是否有一种更简单的方法来完成我正在尝试做的事情，或者任何提示都将得到极大的赞赏

下面是一些HTML代码

<div id="container">
    <div class="element item audio hd phone">
        <p class="number"></p>
        <div class="element_holder bar">
            <div class="thumb">
                <div class="p-darkblue status opacity">
                    <i class="fa fa-comments"></i> Available
                    <div class="modelfeatures">
                        <span><i class="fa fa-volume-up"></i></span>
                        <span data-cat="hd" class="hd">HD</span>
                        <span><i class="fa fa-mobile"></i></span>
                    </div>
                </div>
                <!-- hover over effect on masonary view -->
                <div class="overlay1">
                    <div class="p-darkblue col-lg-12 opacity">
                        <i class="fa fa-comments"></i>Available
                        <div class="modelfeatures">
                            <span><i class="fa fa-volume-up"></i></span>
                            <span class="hd">HD</span>
                            <span><i class="fa fa-mobile"></i></span>
                        </div>
                        <div class="model_name">kinkykat</div>
                        <div class="rating rating_margin">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-half-full"></i>
                        </div>
                    </div>
                </div>
                <!-- end of overlay -->
                <img class="backdrop" src="image source" alt="Kikykat - Available">
                <div class="flame">
                    <div class="flame1"><i class="fa fa-fire"></i></div>
                    <div class="flame2"><i class="fa fa-firefox"></i></div>
                    <div class="flame3"><i class="fa fa-fire"></i></div>
                </div>
            </div>
        </div>

可用
高清
可用
高清
金基卡特

阅读了一些关于同位素的文档后，找到了以下解决方案

    // init Isotope
$(window).ready(function(){

    var $element_holder = $('.element_holder');
    $element_holder.hide();
    var $container = $( '.element' );

           $container.imagesLoaded(function(){
      $element_holder.fadeIn();

                $container.isotope({
                    itemSelector: '.element_holder',
                    layoutMode: 'fitRows',
                    fitRows: {
                            gutter: 1,
            columnwidth: '.element_holder',
                        }
         });
});

问题在于未设置的排水沟：（'