jQuery Masonry 项目顺序

Question

我怎样才能让砖石更多地尊重这里的原始元素顺序？我希望顺序是海豚、鱼、无脊椎动物、鳍足类:

var $container = jQuery('.tax-product_cat #content');
$container.imagesLoaded( function(){
    $container.masonry({
        itemSelector: 'li.product',
        gutterWidth: 22
    });
});

Answer 1

masonry 插件没有提供太多的方式或排序选项，正如您在其 API 中看到的那样。 。然而，同一作者的同位素插件确实提供了大量的排序选项。

http://isotope.metafizzy.co/

正如您所知，您可以像这样包装所有 jQuery 代码 (function($){//your code here })(jQuery);

var container = $('.tax-product_cat #content');

container.isotope({
  itemSelector : 'ul li',
  getSortData : {
    category : function (el) {
      // el refers to each item matching `itemSelector`
      return el.find('h3').text().trim();
    }
  },
  sortBy : 'category',
  sortAscending : true
});

这是排序引用。 http://isotope.metafizzy.co/docs/sorting.html该文档还指定了一些额外的 sortBy 参数:

• 'original-order' 将使用项目元素的原始顺序在布局中排列它们。
• “random”是随机顺序。

这是一个简单的演示，展示了使其工作的所有内容。尝试理解代码正在做什么，并调整您的代码以执行相同的操作。如果它没有按照您想要的方式对它们进行排序，请尝试找出您需要的模式。看到 getSortData 对象了吗？ category 是您定义的东西。这完全是任意的。您可以创建一个backwards类别，然后编写函数以正确的方式返回数据。

http://jsfiddle.net/SRW6g/19/embedded/result/