使用 Shuffle.js 仅定位最后附加的 div

Question

我有一个“加载更多”按钮，单击该按钮后，会将一个新容器附加到我的搜索页面，并显示结果。每个容器都有一个迭代类（例如：.results-1 .results-2 .results-3），具体取决于要加载的项目数量。

问题是，当我单击“加载更多”时，所有结果都会闪到屏幕上，而不仅仅是新添加的项目。这是因为我的代码正在检测砌体网格中的所有项目，而不仅仅是附加的项目。

这一行就是问题所在，我认为：

$('.gallery-photo [class of only most recent append goes here?]').each(function() {

当每个新容器都有一个迭代类时，我如何定位最近附加的项目？

非常感谢任何想法！这是一个没有 php 的例子fiddle。

$(function() {
  $(".gallery-photo").slice(0, 4).show();
  $("#loadMore").on('click', function(e) {
    e.preventDefault();
    $(".gallery-photo:hidden").slice(0, 4).fadeIn();
    $('.gallery-photo').each(function() {
      var $newRow = $(this);
      $('.masonry-gallery').append($newRow);
      $('.masonry-gallery').shuffle('appended', $newRow);
    });
  });
});

$(document).ready(function() {
  var $grid = $('.masonry-gallery');
  $grid.shuffle({
    itemSelector: '.gallery-photo' // the selector for the items in the grid
  });
});

附言这个砌体网格使用 shufflejs。类似的对话 here 使用相同的代码将新项目附加到网格中。

Answer 1

正如您所指出的，问题在于您附加了所有元素，而不仅仅是淡入的元素。

为了解决这个问题，您可以在

.each()

方法之后链接.fadeIn()方法

，以便迭代所有新显示的元素并触发随机更新：

更新示例

$("#loadMore").on('click', function(e) {
  e.preventDefault();

  $(".gallery-photo:hidden")
    .slice(0, 4)
    .fadeIn()
    .each(function() {
      $('.masonry-gallery').shuffle('appended', $(this));
    });
});

---

根据您在下面的评论，这是另一个替代示例，其中元素是从另一个元素附加的（在这种情况下有一个容器元素，

#elements-to-append

，它包含附加的元素）。

更新示例

var $gallary = $('.masonry-gallery');
$gallary.find('.gallery-photo').show();

var shuffle = new window.shuffle($gallary.get(0), {
  itemSelector: '.gallery-photo'
});

$("#loadMore").on('click', function(e) {
  e.preventDefault();
  var $elementsToAppend = $('#elements-to-append').children();

  $gallary.append($elementsToAppend);
  $elementsToAppend.fadeIn().each(function(_, element) {
    shuffle.add([element]);
  });
});

我用原来的 shuffle 脚本替换了 jQuery 脚本，这样你就可以使用 Shuffle

.add()

 方法来将新添加的元素添加到 shuffle 队列中。