在不影响另一个页面的情况下更改一个页面的变量

我有一个页面，使用一些javascript的一些瓷砖。在一页上，它工作得很好。它有6列的瓷砖，你可以点击每一个显示更多的信息。

我的问题是，我是使用相同的东西为另一个页面，但只有3列。当我将列变量更改为3时，它可以在新页面上工作，但原始页面也会发生变化。我需要保留第一页的6栏和新页的3栏。代码的方式是目前我只能有一个或另一个在第9行var per_row = 6我怎么能使这个工作为两个页面而不破坏它?

var griddle_prep = function($el){
        if(!$el.data('init')){
            $el.addClass('griddle-initialized');
            $el.data('init',$el.html());
        }
    };
    var griddle_update = function($el){
        var per_row = 6,
            window_width = $(window).width();
        // instead of calculating heights we're just going to piggyback breakpoints
        // to determine how many items are in each row, see _griddle.scss
        if(window_width<960){
            per_row = 5;
        }
        if(window_width<768){
            per_row = 4;
        }
        if(window_width<650){
            per_row = 3;
        }
        if(window_width<530){
            per_row = 2;
        } 
        // proceed with updating the markup
        if($el.data('init')) {
            // wipe out the existing markup and use the stored 'template'
            $el.html($el.data('init'));
            // wrap each 'row' with a wrapper
            var divs = $el.children(),
                markup = '<div class="wrapper group griddle-row">',
                i = 0;
            divs.each(function(){
                if(i>=per_row){
                    markup += '</div>';
                    markup += '<div class="wrapper group griddle-row">';
                    i = 0;
                }
                markup += $(this).wrap('<div>').parent().html();
                i++;
            });
            markup += '</div>';
            $el.html(markup);
        }
    };
    var griddle_clean_up = function($el){
        var $details = $el.find('.griddle-detail-display');
        if($details.length){
            $details.remove();
            $el.find('.griddle-active').removeClass('griddle-active');
        }
    };
    var griddle_position_indicator = function($el,$details){
        var indicator_left = $el.offset().left + parseInt($el.outerWidth()/2,10);
        $details.find('.griddle-indicator').css('left',indicator_left+'px');
    };
    var $griddles = $('.griddle');
    if($griddles.length){
        $('.griddle-details').hide();
        // bind our details
        $('body').on('click','.griddle-trigger',function(e){
            e.preventDefault();
            var $this = $(this),
                $row = $this.parents('.griddle-row'),
                target_row_index = $row.index(),
                $griddle = $row.parents('.griddle'),
                toggle = $(this).hasClass('griddle-active'),
                $current_row = $griddle.find('.griddle-detail-display'),
                $existing_details = $current_row,
                current_row_index = $current_row.prev().index(),
                $target_details = $this.parents('.griddle-item').find('.griddle-details').clone().show().removeAttr('id').addClass('griddle-detail-display').hide();
            $griddle.find('.griddle-active').removeClass('griddle-active');
            if(toggle){
                $existing_details.slideUp('fast',function(){
                    $existing_details.remove();
                });
            }else{
                // is a current row already displayed?
                if(current_row_index>-1){
                    // check to see if we're just swapping out
                    if(target_row_index===current_row_index){
                        // just swap it out
                        $current_row.remove();
                        $row.after($target_details);
                        $target_details.show();
                    } else {
                        // remove the non-applicable row
                        $existing_details.slideUp('fast',function(){
                            $existing_details.remove();
                        });
                        // show the applicable row
                        $row.after($target_details);
                        $griddle.find('.griddle-detail-display').slideDown('fast');
                    }
                } else {
                    // no current row, just slide it down
                    $row.after($target_details);
                    $griddle.find('.griddle-detail-display').slideDown('fast');
                }
                $this.addClass('griddle-active');
                griddle_position_indicator($this,$target_details);
            }
        });
        $griddles.each(function(){
            var $griddle = $(this);
            // going to grab the griddle HTML because we're going to be swapping it in and out when resizing
            griddle_prep($griddle);
            // init the rows
            griddle_update($griddle);
            // update the rows on resize
            $(window).smartresize(function(){
                griddle_clean_up($griddle);
                griddle_update($griddle);
            });
        });
    }