使用 mix it up 在页面加载时过滤 "premium" 选项

Question

我设置了一个显示大量列表的网格。这些列表中有 'premium' 个类别。即 - 食品清单 1、住宿清单 1、食品清单 2、优质食品清单。

基本上，目前它们是按照它们在 HTML 中设置的顺序加载的。但是我想在选择 "All" 时首先列出 'premium' 列表，然后在选择类别 "food" 时首先列出。

有人能帮帮我吗？ Fiddle 这里 - https://jsfiddle.net/r1yd01fq/2/

$('#Container').mixItUp();

Answer 1

这应该可以解决 "All" 选项

$(document).on("click", ".filter", function() {
  var choice = $(this).data("filter");
  switch (choice) {
    case "all":
      $("#Container div").attr("data-sort", 0);
      $("#Container div.premium").attr("data-sort", 1);
      break;
  }
  var d = $("#Container div");
  d.sort(function(a, b){
    return $(b).data("sort")-$(a).data("sort")
  });
  $("#Container").html(d);
});

Answer 2

找到了一个比较简单的方法。最后使用 .insertAfter 位于容器顶部的高级 div 持有人。然后我使用随机播放插件来随机化高级列表，这样首先加载的列表不会一直显示。

https://jsfiddle.net/r1yd01fq/4/

$.fn.shuffle = function() {

    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
       });

    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });

    return $(shuffled);

};

// Insert all premium listings first
$(".premium").insertAfter(".prem");

// Shuffle premium listing so they appear randomly
$('.premium').shuffle();

// Instantiate MixItUp:
$('#Container').mixItUp({});

使用 mix it up 在页面加载时过滤 "premium" 选项

Filtering "premium" option on page load using mix it up

html

javascript

css

jquery

mixitup