se puede ordenar contenido con Javascript?

[Dradi7]

Bueno te voy a explicar como funciona este codigo,

Primero necesitas lo siguientes script nada mas

jQuery
jQuery Easing
jQuery Quicksand

Luego primero el HTML como lo debes manejar

Primero necesitas los filtros, tu ya lo acomodas bonito para que parezca filtros

Código HTML:

<ul id="filterOptions">
    <li class="active"><a href="#" class="all">All</a></li>
    <li><a href="#" class="prem">Premier League</a></li>
    <li><a href="#" class="champ">Championship</a></li>
    <li><a href="#" class="league1">League 1</a></li>
    <li><a href="#" class="league2">League 2</a></li>
  </ul>
 

filterOptions = viene siendo el contenedor de los filtros
filterOptions li a = viene siendo el filtro respectivo a realizar en donde class es el filtro a buscar en tu listado lo que esta dentro del link solo viendo siendo la etiqueta a mostrar en el filtro

Código HTML:

<ul class="ourHolder">
    <li class="item" data-id="id-1" data-type="league2">
      <img src="images/accrington-stanley.jpg" alt="Accrington Stanley" />
      <h3>Accrington Stanley</h3>
    </li>
    <li class="item" data-id="id-2" data-type="prem">
      <img src="images/arsenal.jpg" alt="Arsenal" />
      <h3>Arsenal</h3>
    </li>
    <li class="item" data-id="id-3" data-type="league2">
      <img src="images/burton-albion.jpg" alt="Burton Albion" />
      <h3>Burton Albion</h3>
    </li>
    <li class="item" data-id="id-4" data-type="champ">
      <img src="images/cardiff-city.jpg" alt="Cardiff City" />
      <h3>Cardiff City</h3>
    </li>
    <li class="item" data-id="id-5" data-type="champ">
      <img src="images/derby-county.jpg" alt="Derby County" />
      <h3>Derby County</h3>
    </li>
    <li class="item" data-id="id-6" data-type="prem">
      <img src="images/everton.jpg" alt="Everton" />
      <h3>Everton</h3>
    </li>
    <li class="item" data-id="id-7" data-type="league2">
      <img src="images/morecambe.jpg" alt="Morecambe" />
      <h3>Morecambe</h3>
    </li>
    <li class="item" data-id="id-8" data-type="champ">
      <img src="images/norwich-city.jpg" alt="Norwich City" />
      <h3>Norwich City</h3>
    </li>
    <li class="item" data-id="id-9" data-type="league1">
      <img src="images/notts-county.jpg" alt="Notts County" />
      <h3>Notts County</h3>
    </li>
    <li class="item" data-id="id-10" data-type="champ">
      <img src="images/reading.jpg" alt="Reading" />
      <h3>Reading</h3>
    </li>
    <li class="item" data-id="id-11" data-type="league1">
      <img src="images/sheffield-wednesday.jpg" alt="Sheffield Wednesday" />
      <h3>Sheffield Wednesday</h3>
    </li>
    <li class="item" data-id="id-12" data-type="prem">
      <img src="images/sunderland.jpg" alt="Sunderland" />
      <h3>Sunderland</h3>
    </li>
    <li class="item" data-id="id-13" data-type="prem">
      <img src="images/tottenham-hotspur.jpg" alt="Tottenham Hotspur" />
      <h3>Tottenham Hotspur</h3>
    </li>
    <li class="item" data-id="id-14" data-type="champ">
      <img src="images/watford.jpg" alt="Watford" />
      <h3>Watford</h3>
    </li>    
  </ul>
 

ourHolder = viene siendo el contenedor de toda la informacion que vas a listar
ourHolder li = viene siendo cada item que cuenta el listado, class significa que es un item de la data, data-id solamente es un correlativo, data-type este atributo es que te va a permitir hacer la magia es decir poder filtrarlo de acuerdo lo que esta arriba, lo que esta dentro de li ya viene siendo solo informacion a mostrar.

Saludos