Isotope / top left sorting (?)

by DJS Baker

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<nav id="main-nav">
    <ul class="option-set clearfix" data-option-key="sortBy" id="sort-by">
        <li><a class="selected" href="#sortBy=original-order" data-option-value="original-order">Original</a></li>
        <li><a href="#sortBy=milk" data-option-value="milk">Milk</a></li>
        <li><a href="#sortBy=eggs" data-option-value="eggs">Eggs</a></li>
        <li><a href="#sortBy=bacon" data-option-value="bacon">Bacon</a></li>
    </ul>
</nav>
<section id="homepage-grid">
    <article class="small milk">
        Milk - #1              
    </article>
    <article class="small milk">
        Milk - #2              
    </article>
    <article class="small milk">
        Milk - #3              
    </article>
    <article class="small milk">
        Milk - #4              
    </article>
    <article class="small milk">
        Milk - #5              
    </article>
    <article class="small eggs">
        Eggs - #1              
    </article>
    <article class="small eggs">
        Eggs - #2              
    </article>
    <article class="small eggs">
        Eggs - #3              
    </article>
    <article class="small eggs">
        Eggs - #4              
    </article>
    <article class="small eggs">
        Eggs - #5              
    </article>
    <article class="small bacon">
        Bacon - #1              
    </article>
    <article class="small bacon">
        Bacon - #2              
    </article>
    <article class="small bacon">
        Bacon - #3              
    </article>
    <article class="small bacon">
        Bacon - #4              
    </article>
</section>

CSS

#homepage-grid {
    margin:5px;
}

article {
    line-height:115px;   
    margin:5px;    
    text-align:center;
}

.small {
    background:#ddd;
    height:115px;
    width:115px;
}

.medium {
    background:#ccc;
    height:115px;
    width:240px;
}

.large {
    background:#aaa;                
    height:240px;
    line-height:240px;
    width:240px;
}

.isotope,
.isotope .isotope-item {
    transition-duration: 0.8s;
        -moz-transition-duration: 0.8s;
        -ms-transition-duration: 0.8s;
        -o-transition-duration: 0.8s;
        -webkit-transition-duration: 0.8s;
}

.isotope {
    transition-property: height, width;
        -moz-transition-property: height, width;
        -ms-transition-property: height, width;
        -o-transition-property: height, width;
        -webkit-transition-property: height, width;
}

.isotope .isotope-item {
    transition-property: transform, opacity;
        -moz-transition-property: -moz-transform, opacity;
        -ms-transition-property: -ms-transform, opacity;
        -o-transition-property: top, left, opacity;
        -webkit-transition-property: -webkit-transform, opacity;
}

JavaScript

jQuery(document).ready(function($) {
    
                var $container = $('#homepage-grid');
                $container.imagesLoaded( function(){
                    $container.isotope({
                        itemSelector: 'article',
                        masonry: {
                            columnWidth: 125
                        },
                        getSortData : {
                            milk : function( $elem ) {
                                var isMilk = $elem.hasClass('milk');
                                return (!isMilk?' ':'');
                            },
                            eggs : function( $elem ) {
                                var isEggs = $elem.hasClass('eggs');
                                return (!isEggs?' ':'');
                            },
                            bacon : function( $elem ) {
                                var isBacon = $elem.hasClass('bacon');
                                return (!isBacon?' ':'');
                            }
                        }
                    });
                });
    
                var $optionSets = $('#main-nav .option-set'),
                          $optionLinks = $optionSets.find('a');
                
                      $optionLinks.click(function(){
                        var $this = $(this);
                        // don't proceed if already selected
                        if ( $this.hasClass('selected') ) {
                          return false;
                        }
                        var $optionSet = $this.parents('.option-set');
                        $optionSet.find('.selected').removeClass('selected');
                        $this.addClass('selected');
                  
                        // make option object dynamically, i.e. { filter: '.my-filter-class' }
                        var options = {},
                            key = $optionSet.attr('data-option-key'),
                            value =...