6

所以我正在使用 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 将项目“附加”到 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功能来查看它是否会在加载更多图像时起作用，但它没有，实际上在某种程度上破坏了它。

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

4

3 回答 3

1

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

于 2013-06-11T15:03:14.580 回答
0

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

最后，您可以做一个巧妙的技巧并制作 . append()触发一个事件。然后将该事件的处理程序附加到附加内容的大容器中，因此会自动调用一个函数。这是关于 append() 做某事的一个很好的例子，还有一个 jsfiddle http://jsfiddle.net/rzRVu/

PS。在旁注中，我看到您的函数将 ID 作为输入，但随后您调用了 .each()。html 代码中的 ID 应该是唯一的。

更新。我错过了你试图通过砖石正确地做到这一点，究竟是什么破坏了？我看到你在一个 jQuery 变量上调用 .imagesLoaded() ，那是一个插件吗？

于 2013-06-07T09:38:55.400 回答
0

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

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

有了这个：

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

问题解决了！

于 2013-06-12T21:38:46.650 回答