10

我怎样才能让砖石在这里尊重更多的原始项目订单？我希望顺序是海豚、鱼、无脊椎动物、鳍足类动物：

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

3 回答 3

9

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

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' 将使用项目元素的原始顺序在布局中排列它们。
  • “随机”是随机顺序。

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

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

于 2012-07-13T01:15:08.293 回答
3

最新的砌体支持带有horizontalOrder: true设置的命令。

于 2019-09-24T08:41:47.143 回答
2

有插件 - jquery masonry 的“masonry-ordered”，使排序表现得像

1, 2, 3
4, 5, 6
7, 8, 9
于 2013-10-29T12:41:33.257 回答