使用 jquery 追加砌体答案

【问题标题】：Using jquery append with masonry使用 jquery 追加砌体
【发布时间】：2013-10-04 12:41:21
【问题描述】：

我正在使用这个：

$('#loadmore').click(function() {
$.ajax({
   url: 'includes/loadmorebuilds.php',
   success: function(html) {
      $("#content").append(html);
   }
});
});

将更多项目加载到使用 jquery masonry 排序的容器中。然而，当它们被附加时，它们不会跟随其余的项目并打破砌体风格。

新项目作为砖石布局工作，但它们只是不会从第一个项目继续。他们从那里开始自己的路线。

我在他们的网站上搜索并找到了以下信息：

msnry.appended( elements )
// or with jQuery
$container.masonry( 'appended', elements )

我只需要帮助修改我的原始脚本以使附加的项目与砖石一起使用。

谢谢，克雷格。

【问题讨论】：

永远不要duplicate your own question 只是因为你对答案还没有信心。相反，请参阅帮助部分，了解您可以做哪些工作和努力来改进您的研究、编写代码示例以进行复制和提出问题。然后使用 edit 按钮并改进您的原始问题。否则，您只会看到投反对票，并且会驱走想要提供帮助的潜在用户。

标签： javascript jquery append jquery-masonry

【解决方案1】：

您可以做的是将传入的 html 附加到砌体容器中，然后“通知”砌体有关它。看看this fiddle。因此，在您的示例中，您的成功回调可能类似于：

//...      
success: function(html) {
    var content = $("#content"),
        elements = $(html); 
        // would make sense to reference your masonry container through 
        // a variable used earlier in the script, but that should work too
        content.append(html).masonry('appended', elements);
}
//...

还有其他一些方法可以做到这一点，但它应该足以满足您的描述。重要的是您传递了'Type: Element, NodeList, or Array of Elements' 的元素，因此您可能想要检查您实际收到的内容。

【讨论】：