Question

所以我使用的是jQuery Masonry，我希望每次加载帖子时调用一些jQuery：

function manipulate(id) {
    $(id).each(function(){
    if($(this).height()>200){
        $('#container2').append(this);
    } else{
        $('#container').append(this);
    };
  });
};

所以我想每次加载Masonry容器中的下一个项目时调用此函数。这样它以正确的方式操纵项目。我该怎么做？

更新：砌体的描述

Masonry是一个Javascript插件，就像CSS浮动被迫完美契合+无限滚动。如果没有无限滚动，它会完全隐藏第1页上不会出现的所有内容，然后在必要时加载它们。这意味着我的功能不会影响任何隐藏的项目，只要Masonry加载下一组项目以便它们出现在正确的位置，就需要调用它。这可能意味着在不了解砌体的情况下，您不一定能够解决我的问题，但您仍然可以。最后，Masonry将物品“追加”到砌体容器中，然后“显示”它们。所以我想我需要做的是将它们附加到Masonry容器后附加到正确的容器中，但是在它被显示之前。

砌体代码：

$(window).load(function(){
  var $wall = $('#container');
  $wall.imagesLoaded(function(){
    $wall.masonry({
      itemSelector: '#entry, #entry_photo',
      isAnimated : false
    });
  });

  $wall.infinitescroll({
    navSelector    : '#page-nav',  
    nextSelector   : '#page-nav a',
    itemSelector   : '.entry, .entry_photo',
    bufferPx       : 2000,
    debug          : false,
    errorCallback: function() {
      $('#infscr-loading').fadeOut('normal');  
    }},
    function(newElements) {
      var $newElems = $(newElements);
      $newElems.hide();
      $newElems.imagesLoaded(function(){
        $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
      });
    }); $('.entry').show(500);
  });

我已经尝试将该函数放入Masonry块中，甚至作为$newElems函数来查看它是否会在加载更多图像时起作用，但它没有，并且实际上有些打破它。

如何通过我的jQuery运行Masonry加载的所有新元素，以便将它们附加到正确的容器中？

Answer 1

您只为container声明了一个Masonry实例，container2没有Masonry实例，因此无法无限滚动任何内容。此外，如果图片尚未加载，($(this).height()>200)将始终为false，它将默认为undefined -> 0 > 200，这始终为false。您需要在放置图像之前等待图像加载，或者在加载内容时以某种方式获取图像的尺寸。您可以默认隐藏它并将其放在container中，然后放在imagesloaded上，检查高度，然后将其移动到相应的容器中并显示它。

Answer 2

另一个想法是将动作绑定到jQuery的.on()（http://api.jquery.com/on/）。 on（）也会绑定未来的元素，假设它们已正确附加到DOM（例如通过.append（））。例如，您可以将.click（）事件绑定到尚未创建的元素上。

最后你可以做一个巧妙的技巧并制作。append()触发一个事件。然后将该事件的处理程序附加到附加了事物的大容器中，因此会自动调用一个函数。以下是on append() do something和jsfiddle http://jsfiddle.net/rzRVu/

的一个很好的例子

PS。在旁注中，我看到你的函数将ID作为输入，但是你调用.each（）。 HTML代码中的Id应该是唯一的。

更新。我错过了你试图通过砌体正确地做到这一点，究竟是什么打破了？我看到你在一个jQuery变量上调用.imagesLoaded（），是一个插件吗？

Answer 3

所以在提供的答案中使用的东西说，我搞砸了，发现它是如何完成的...所以'appended'中的imagesLoaded部分只需要用函数替换！这真的是一个简单的答案......我只需要替换它：

$wall.masonry( 'appended', $newElems,{isAnimated: false},
function(){$newElems.fadeIn('slow');} );

用这个：

$wall.masonry(manipulate($newElems) ,{isAnimated: false},
function(){$newElems.fadeIn('slow');} );

问题解决了！

当事情发生时调用jQuery

3 个答案: