好吧，有多种方法可以做到这一点。

一种方法是先在类别客户端上循环，然后对每个类别进行单独的请求。这就是您在代码中基本上要做的事情。您正在对一系列类别进行迭代，并为每个类别发出请求。

另一种方法是将该类别数组传递给您的处理程序。您需要做的就是修改您的处理程序以接受整数或类别数组。然后您可以返回一个JSON对象。但这涉及到更多的编辑，最重要的是，它并没有解决每个部分具有不同大小和高度的问题。

因此，在下面，我稍微修改了代码以跟踪多个部分。我们只需要一些小编辑：

< li >每个部分都需要有类别号、页码、内容部分以及是否加载的标志。每个都需要存储在单个列表中以便跟踪。 < li >我们需要迭代每个类别来初始化它。 < li >我们需要在窗口滚动时迭代每个类别，并检查是否应加载下一个项目 < li >我们需要确保每个请求都与所请求的类别相关联

从稍微修改你的div开始（这只是一个偏好问题，我更喜欢将这样的元数据存储在属性中而不是类中）：

<div class="news_posts" data-category="6"></div>
<div class="news_posts" data-category="3"></div>
<div class="news_posts" data-category="2"></div>

这是一个修改后的JS（请注意，我更改了一些变量和函数名称）：

jQuery(function($){
    var $window = $(window);
    var cats = [];
    var contentDivs = $(".news_posts");

    var initializeCats = function(){
        // adds category objects to a list for tracking
        for(var i = 0; i < contentDivs.length; i++){
            var catNum = $(contentDivs[i]).attr("data-category");
            var cat = {
              catNum  : catNum,
              catPage : 1,
              loading : true,
              catDiv  : $(contentDivs[i]);
            };

            cats.push(cat);

            load_post(cat);
        }
    };

    var load_post = function(cat) {
        $.ajax({
            type       : "GET",
            data       : {
                numPosts   : 2, 
                pageNumber : cat.catPage, 
                cat        : cat.catNum
            },
            dataType   : "html",
            url        : "http://127.0.0.1:4001/wordpress/wp-content/themes/twentyeleven-child-theme/loopHandler.php",
            beforeSend : function(){
                if(page != 1){
                    // this was a bad idea when i wrote the article originally
                    // never concatenate strings on multiple lines by escaping
                    // the carriage return 
                    // $content.append('<div id="temp_load" style="text-align:center">\
                    //    <img src="/images/ajax-loader.gif" />\
                    //    </div>'); 

                    cat.catDiv.append("<div class='temp_load' style='text-align:center'>" +
                        "<img src='/images/ajax-loader.gif' />" +
                        "</div>");
                }
            },
            success    : function(data){
                $data = $(data);

                if($data.length){
                    $data.hide();
                    cat.catDiv.append($data);

                    $data.fadeIn(500, function(){
                        cat.catDiv.find(".temp_load").remove();
                        cat.loading = false;
                    });
                } else {
                    cat.catDiv.find(".temp_load").remove();
                }
            },
            error     : function(jqXHR, textStatus, errorThrown) {
                cat.catDiv.find(".temp_load").remove();
                alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
        });
    });  

    var onWindowScroll = function(){
        for(var i = 0; i < cats.length; i++){
            var cat = cats[i];
            var contentDiv = cat.catDiv;
            var content_offset = contentDiv.offset();                              

            if( !cat.loading && 
                ($window.scrollTop() + $window.height()) > 
                (contentDiv.scrollTop() + contentDiv.outerHeight() + content_offset.top)
            ) {
                cat.loading = true;
                cat.catPage++;

                load_post(cat);
            }
        }
    }

    initializeCats();
    $window.scroll(onWindowScroll);     

});

PHP文件基本相同，只需注释掉echo$numPosts行：

$numPosts = (isset($_GET['numPosts']))   ? $_GET['numPosts']   : 0;
$page     = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;
$cat      = (isset($_GET['cat']))        ? $_GET['cat']        : 0;

// echo $numPosts;
echo $page;

query_posts(array(
       'posts_per_page' => $numPosts,
       'paged'          => $page,
       'cat'            => $cat
));

这只是我快速掀起的东西。我还没有测试过。尝试一下，注意语法错误，并交叉手指:)。我希望这对您有用，如果没有，我们可以考虑对其进行修改，以便它这样做。