isotope打造绚丽的动态效果

地址：http://isotope.metafizzy.co/

gitHub: https://github.com/metafizzy/isotope

小Demo:

    
    
    
    
    
    
    
    
    
Filter
    
    
show all    
metal    
transition    
–ium    
    
    
    
Sort
    
    
original    
order    
name     
    
    
Filter1    
Filter2    
Filter3    
Filter4    
 ----> Sort    
Name    
Original    
    
    
     Aog    
        
     Dog    
        
     Cat    
        
    
 Aog    
    
 Dog    
    
 Cat    
    
 Aog    
    
 Dog    
    
 Cat    
    
 Aog    
    
 Dog    
    
 Cat    
    
 Aog    
    
 Dog    
    
 Cat    
    
    
    
    
    

进阶：

1）动态添加

$elem="
.....
";
$container.isotope()
  .append( $elem )
  .isotope( 'appended', $elem )
  .isotope('layout');

2）多组多虑

  any
  red
  blue
  yellow
  any
  small
  wide
  ...
  
  // store filter for each groupvar filters = {};

$demo.on( 'click', '.button', function() {  var $this = $(this);  // get group key
  var $buttonGroup = $this.parents('.button-group');  var filterGroup = $buttonGroup.attr('data-filter-group');  // set filter for group
  filters\[ filterGroup \] = $this.attr('data-filter');  // combine filters
  var filterValue = '';  for ( var prop in filters ) {
    filterValue += filters\[ prop \];
  }  // set filter for Isotope
  $container.isotope({ filter: filterValue });
});