javascript - 同位素 : reorder or shuffle elements based on width

Question

我正在研究同位素，正如您从代码中看到的那样，我已经实现了基本的可过滤布局。现在我想添加一些其他功能。单击可过滤元素后，最大宽度的元素应该首先出现。

在代码中，正如您在单击红色时看到的那样，它为我提供了所需的布局(“一个大元素和其下方的两个小元素”)。但在蓝色的情况下，较小的元素排在较大的元素之前。

Codepen Link

请随时澄清任何疑问。

提前致谢。

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.color-shape',
  layoutMode: 'fitRows'
});

// store filter for each group
var filters = {};

var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt(number, 10) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match(/ium$/);
  }
};
$('.filters').on('click', '.button', function(event) {
  var filterValue = $(this).attr('data-filter');
  // use filterFn if matches value
  filterValue = filterFns[filterValue] || filterValue;
  $grid.isotope({
    filter: filterValue
  });
});


// change is-checked class on buttons
$('.button-group').each(function(i, buttonGroup) {
  var $buttonGroup = $(buttonGroup);
  $buttonGroup.on('click', 'button', function(event) {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    var $button = $(event.currentTarget);
    $button.addClass('is-checked');
  });
});

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 40%;
  margin: 0 auto;
}

.tile.wide.square {
  width: 100%;
}

.tile.small.square {
  width: 50%;
  display: inline;
}

.button-group {
  margin: 50px 0;
  text-align: center;
}


/* color-shape */

.color-shape {
  height: 70px;
  margin-bottom: 10px;
}

.color-shape.round {
  border-radius: 35px;
}

.color-shape.big.round {
  border-radius: 75px;
}

.color-shape.red {
  background: red;
}

.color-shape.blue {
  background: blue;
}

.color-shape.yellow {
  background: yellow;
}

.color-shape.wide,
.color-shape.big {
  width: 150px;
}

.color-shape.tall,
.color-shape.big {
  height: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

<div class="filters">
  <div class="ui-group">
    <h3>Color</h3>
    <div class="button-group js-radio-button-group" data-filter-group="color">
      <button class="button is-checked" data-filter="">any</button>
      <button class="button" data-filter=".red">red</button>
      <button class="button" data-filter=".blue">blue</button>
      <button class="button" data-filter=".yellow">yellow</button>
    </div>
  </div>
</div>

<div class="grid">
  <div class="tile color-shape wide square red"></div>
  <div class="tile color-shape small square red"></div>
  <div class="tile color-shape small square blue"></div>
  <div class="tile color-shape wide square blue"></div>
  <div class="tile color-shape small square blue"></div>
  <div class="tile color-shape small square yellow"></div>
  <div class="tile color-shape wide square yellow"></div>
  <div class="tile color-shape small square yellow"></div>
  <div class="tile color-shape small square red"></div>
</div>

Answer 1

您可以使用 getSortData和 sortBy来完成这个。

使用 getSortData 定义排序时使用的标准/值

var $grid = $('.grid').isotope({
  itemSelector: '.color-shape',
  layoutMode: 'fitRows',
  getSortData: {
      wide: function(element){return element.classList.contains('wide') ? -1 : 1}
    }
});

并指示使用 sortBy

进行排序

$('.filters').on( 'click', '.button', function( event ) {
  var filterValue = $( this ).attr('data-filter');
  var sortValue = filterValue ? 'wide' : 'original-order';
     // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $grid.isotope({ filter: filterValue, sortBy: sortValue });
});

---

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.color-shape',
  layoutMode: 'fitRows',
  getSortData: {
      wide: function(element){return element.classList.contains('wide') ? -1 : 1}
    }
});

// store filter for each group
var filters = {};

var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt(number, 10) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match(/ium$/);
  }
};
$('.filters').on( 'click', '.button', function( event ) {
  var filterValue = $( this ).attr('data-filter');
  var sortValue = filterValue ? 'wide' : 'original-order';
     // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $grid.isotope({ filter: filterValue, sortBy: sortValue });
});


// change is-checked class on buttons
$('.button-group').each(function(i, buttonGroup) {
  var $buttonGroup = $(buttonGroup);
  $buttonGroup.on('click', 'button', function(event) {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    var $button = $(event.currentTarget);
    $button.addClass('is-checked');
  });
});

.tile img { width: 100%; }
.tile {
  height: 400px;
  background: url('https://source.unsplash.com/random') no-repeat;
  background-size: cover; 
}
.grid {
  display: flex;
  flex-wrap: wrap;
  width: 40%;
  margin: 0 auto;
}
/* .tile.small { width: 50%; }
.tile.wide { width: 100%; } */
.tile.wide.square {
  width: 100%;
}
.tile.small.square {
  width: 50%;
  display: inline;
}

.button-group {
  margin: 50px 0;
  text-align: center;
}
  
  /* color-shape */

.color-shape {
  height: 70px;
  margin-bottom: 10px;
  border: 4px solid black;
}
 
.color-shape.red { background: #fb6a6a; }
.color-shape.blue { background: #bebef9; }
.color-shape.yellow { background: #f3f36e; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/>

<div class="filters">
  <div class="ui-group">
    <h3>Color</h3>
    <div class="button-group js-radio-button-group" data-filter-group="color">
      <button class="button is-checked" data-filter="">any</button>
      <button class="button" data-filter=".red">red</button>
      <button class="button" data-filter=".blue">blue</button>
      <button class="button" data-filter=".yellow">yellow</button>
    </div>
  </div>
</div>

<div class="grid">
  <div class="tile color-shape wide square red"></div>
  <div class="tile color-shape small square red"></div>
  <div class="tile color-shape small square blue"></div>
  <div class="tile color-shape wide square blue"></div>
  <div class="tile color-shape small square blue"></div>
  <div class="tile color-shape small square yellow"></div>
  <div class="tile color-shape wide square yellow"></div>
  <div class="tile color-shape small square yellow"></div>
  <div class="tile color-shape small square red"></div>
</div>

---

在 https://codepen.io/gpetrioli/pen/exGXBP 更新了演示