Question

我使用jQuery瀑布作为响应式网格布局。

我正在使用砌体，并且有一个加载更多的按钮功能，但我正在修改我所拥有的并试图理解代码的作用。

所以对于加载更多按钮，我有这个：

$(document).ready(function(){
    var pageIndex = 1;
    $('#loadmorebuilds-div').click(function() {
        $("#buildcontainer").append('<div class="blogresults"><br><br></div>');
    });
});

理论上，这很好用。但是，我有另一个页面加载我的数据库中的所有额外内容。

这是之前使用的：

$(document).ready(function(){
    var pageIndex = 1;
    $('#loadmorebuilds-div').click(function() {
        $('.countvar').detach();
        $('#buildcontainer').imagesLoaded( function(){
        $.ajax({
           url: 'includes/loadmorebuilds.php?type=' + type + '&pageIndex=' + pageIndex,
           success: function(html) {
              var el = $(html);

              $("#buildcontainer").append(el);
              $("#loadmorebuilds-div").stop().fadeOut();
              pageIndex++;

              var rowCount = $(".countvar").html();

              if (rowCount < 16) {
                $('#loadmorebuilds-div').remove(); 
                $('.countvar').detach();
              } else {
                $('.countvar').detach();
              }

           }

        });

    });

});
});

这也有效，并且会加载新数据但似乎加载数据并且不能正确地将其放入网格中。其中一个结果位于其他结果之下，但其他结果在左上方重叠并位于其他位置之下等。

我可以使用第一个示例手动追加尽可能多的div，它可以正常工作。

同样在使用第二个示例时，项目似乎刷新并且仅适用于正在加载的新数据。

在我看来，它与此有关：

success: function(html) {
    var el = $(html);

是否有更好的方法从请求的页面获取内容，只需将其附加回div。

调用的页面只是在数据库上运行查询，并在foreach语句中回显div。所以div布局就是例如

<div class="blogresults"></div>

关于这个的任何想法？

Answer 1

关于ajax成功事件你应该这样做：

    success: function(data) {
        $('blogresults').html(data);
}

Answer 2

搜索瀑布文件夹中的示例，它似乎使用了“reflow”功能，其工作原理相同（我猜）和砌体“重新加载”。

将其视为

$("#buildcontainer").append(html).waterfall('reflow');

它有效：）

如何从另一个PHP文件追加数据

2 个答案: