jQuery砌体项目订单

Question

我怎样才能让砖石在这里尊重更多的原始物品订单？我想命令是海豚,鱼,无脊椎动物,pinnipeds:

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

Answer 1

砌体插件没有提供太多的方式或排序选项,您可以在他们的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'将使用item元素的原始顺序在布局中排列它们.
• 'random'是随机顺序.

这是一个简单的演示,展示了使其工作的一切.尝试并了解代码正在做什么并调整代码以执行相同操作.如果它没有按照您的意愿排序,请尝试找出您需要的模式.看到getSortData对象？category是你定义的东西.这完全是武断的.您可以创建一个backwards类别,只需编写函数即可以正确的方式返回数据.

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