Isotope - sort by closest to var

re https://twitter.com/beardosteve/status/76367158610898944

by Reusablecode

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<p>Sort by closest to</p>
<ul id="sorts">
  <li><a href="#1">1</a></li>
  <li><a href="#2">2</a></li>
  <li><a href="#4">4</a></li>
  <li><a href="#5">6</a></li>
  <li><a href="#7">7</a></li>
  <li><a href="#8">8</a></li>
  <li><a href="#11">11</a></li>
  <li><a href="#14">14</a></li>
</ul>

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

CSS

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

#container {
  background: #EEE;
}

.item {
  margin: 4px;
  border: 1px dashed;
  padding: 5px;
  background: white;
  width: 60%;
}

#sorts li {
  list-style: none;
  display: inline-block;
}

#sorts li a {
  display: block;
  padding: 10px;
  background: #DDF;
  font-weight: bold;
}

#sorts li a:hover {
  background: blue;
  color: white;
}

JavaScript

$(function(){
  
  var $container = $('#container'),
      $items = $('.item'),
      foo = 0;
  
  $container.isotope({
    animationEngine: 'jquery',
    layoutMode: 'straightDown',
    getSortData: {
      closestToFoo : function( $elem ) {
        return Math.abs( foo - $elem.text() );
      }
    },
    sortBy: 'closestToFoo'
  });
  
  $('#sorts a').click(function(){
    // update foo
    foo = $(this).text();
    $container
      // update sort data on all items
      .isotope( 'updateSortData', $items )
      // trigger re-sort and reLayout
      .isotope();
  });
  
});