如何在jQuery Isotope中撤销Shuffle（随机排序）操作？

Got it, let's fix this so your Isotope grid behaves exactly how you want it to. The core issue here is that we need to preserve the original order of your items so we can revert back to it whenever the filter changes—like clearing the search or switching to a different filter set. Here's how to implement this step by step:

Step 1: Track Original Item Order #

First, when you initialize Isotope, add a data attribute to each item to store its original position in the grid. This gives us a reliable reference point to sort back to later.

// Initialize Isotope and mark original indices
const $grid = $('.your-grid-class').isotope({
  itemSelector: '.your-item-class',
  // Add your existing layout mode/settings here (e.g., masonry)
  layoutMode: 'masonry'
});

// Assign original index to each item
$grid.find('.your-item-class').each(function(index) {
  $(this).data('original-index', index);
});

Step 2: Create a Function to Restore Original Order #

Next, write a helper function that tells Isotope to sort items using their original index. This will instantly revert the grid to its initial state.

function restoreOriginalOrder() {
  $grid.isotope({
    sortBy: 'original-index',
    sortAscending: true
  });
}

Step 3: Update Your Filter Logic #

Modify your existing filter triggers (like the search input or filter buttons) to check the filtered item count, and either shuffle or restore the order accordingly. We'll use Isotope's arrangeComplete event to make sure we only check the count after the grid has finished updating.

Example for Search Input #

If your search uses an input field, bind the logic to the input event:

$('.search-input').on('input', function() {
  const filterValue = $(this).val();
  $grid.isotope({ filter: filterValue });

  // Wait for Isotope to finish filtering before checking count
  $grid.one('arrangeComplete', function() {
    const filteredElems = $grid.isotope('getFilteredItemElements');
    if (filteredElems.length >= 13) {
      ShuffleBlocks(); // Keep your existing shuffle function
    } else {
      restoreOriginalOrder(); // Revert if fewer than 13 items
    }
  });
});

Example for Filter Buttons/Clear Action #

For clear buttons or other filter switches, explicitly call the restore function when resetting the filter:

// Clear search/filter button
$('.clear-filter-btn').on('click', function() {
  $('.search-input').val('');
  $grid.isotope({ filter: '*' });
  restoreOriginalOrder(); // Revert to original order immediately
});

// For category filter buttons
$('.filter-btn').on('click', function() {
  const filterValue = $(this).data('filter');
  $grid.isotope({ filter: filterValue });

  $grid.one('arrangeComplete', function() {
    const filteredElems = $grid.isotope('getFilteredItemElements');
    if (filteredElems.length >= 13) {
      ShuffleBlocks();
    } else {
      restoreOriginalOrder();
    }
  });
});

Step 4: Keep Your Existing Shuffle Function #

Your original shuffle logic stays exactly the same—no changes needed here:

function ShuffleBlocks() {
  $grid.isotope('shuffle');
}

How This Works #

• We store each item's original position during initialization, so we always have a "map" to return to.
• Using Isotope's built-in sortBy feature, we can quickly re-sort items to match their initial order whenever needed.
• The arrangeComplete event ensures we only check the filtered item count after Isotope has finished updating the grid, avoiding race conditions where we might check the count before the grid has fully reloaded.

内容的提问来源于stack exchange，提问作者Jellev98