isotope.js按href排序？

Question

我正在构建一个WordPress网站，我正在使用isotope.js作为主页上的缩略图，这些缩略图链接到帖子，我试图点击一个按钮在一个砌体布局之间切换然后一个通过href对这些缩略图进行分组的布局是否可行？非常感谢你。

这是我的html：

<a class="thumbnail large-img" href="http://wordpresssite.com/post/post-title/">
<img width="624" height="352" src="http://wordpresssite.com/wp-content/uploads/2013/03/postimage.jpg" class="attachment-full"/> 
</a>

<a class="thumbnail med-img" href="http://wordpresssite.com/post/post-title/">
<img width="500" height="357" src="http://wordpresssite.com/wp-content/uploads/2013/03/postimage2.jpg" class="attachment-full"/>    
</a>

<a class="thumbnail med-img" href="http://wordpresssite.com/post/another-post-title/">
<img width="500" height="357" src="http://wordpresssite.com/wp-content/uploads/2013/03/postimage3.jpg" class="attachment-full"/>    
</a>

<a class="thumbnail port-img" href="http://wordpresssite.com/post/another-post-title/">
<img width="300" height="420" src="http://wordpresssite.com/wp-content/uploads/2013/03/postimage4.jpg" class="attachment-full"/>    
</a>

<a class="thumbnail med-img" href="http://wordpresssite.com/post/yet-another-post-title/">
<img width="500" height="357" src="http://wordpresssite.com/wp-content/uploads/2013/03/postimage5.jpg" class="attachment-full"/>    
</a>

      

这是我的尝试：

        $('a.entry').each(function(){

            var href = jQuery(this).attr('href');
            var groupClass = jQuery(this).attr('class');
            var count = 0;

        $('a.entry').each(function(){

            if ( href === jQuery(this).attr('href') ) {


        $(this).attr('data-symbol', count);


            } else {

            count++;

        }

        });

        });

  $(function(){

  var $container = $('#boxes');


  $container.isotope({
layoutMode : 'masonry',
    masonry: {
    columnWidth: 324
    },
    getSortData : {
      symbol : function( $elem ) {
        return $elem.attr('data-symbol');
      },
      category : function( $elem ) {
        return $elem.attr('href');
      }
    }
  });


  var $optionSets = $('#options .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 = $this.attr('data-option-value');
    // parse 'false' as false boolean
    value = value === 'false' ? false : value;
    options[ key ] = value;
    if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
      // changes in layout modes need extra logic
      changeLayoutMode( $this, options )
    } else {
      // otherwise, apply new options
      $container.isotope( options );
    }

    return false;
  });


});

基本上不是按href排序，而是按数据符号排序。对不起，我最初没有发布这个代码，我真的想弄清楚这个。我没想到有人会“为我做我的工作”。

...提前谢谢。