10

ここで石工が元のアイテムの注文をより尊重するようにするにはどうすればよいですか? イルカ、魚、無脊椎動物、鰭足類の順番でお願いします。

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

3 に答える 3

9

メーソンリー プラグインは、 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 要素の元の順序を使用してレイアウトに配置します。
  • 「ランダム」はランダムな順序です。

これは簡単なデモで、動作させるためのすべてを示しています。コードが何をしているかを調べて、同じことをするようにコードを調整してください。希望どおりに並べ替えられない場合は、必要なモードを見つけてみてください。getSortData オブジェクトを参照してください。あなたが定義するcategoryものです。それは完全に恣意的です。カテゴリを作成し、適切な方法でデータを返す関数を作成するだけです。backwards

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

于 2012-07-13T01:15:08.293 に答える
2

プラグインがあります-jquery masonryがソートを次のように動作させるための「masonry-ordered」

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