Question

如何在这里获得更多原始商品订单的砌体？我希望这个命令是海豚，鱼，无脊椎动物，鳍状肢：

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

Answer 1

砌体插件没有提供太多的方式或排序选项，正如您在API中看到的那样。然而，同一作者的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'将使用item元素的原始顺序在布局中排列它们。
'random'是随机顺序。

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

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

Answer 2

jquery masonry有plugin - "masonry-ordered"使排序行为像

1, 2, 3
4, 5, 6
7, 8, 9

Answer 3

最新的砌体支持使用horizontalOrder: true设置的订单。

jQuery砌体项目订单

3 个答案: