0

我编写了一个自定义函数，将绝对 div 定位在容器内，计算顶部位置和高度：

$.fn.gridB = function() {
    var o = $(this); //EDITED from var o = $(this[0]);
    o.each(function() {
        var a1top = o.find('.article1').position().top;
        var a1height = o.find('.article1').height();
        var a0top = o.find('.article0').position().top;
        var a0height = o.find('.article0').height();
        var a2top = o.find('.article2').position().top;
        var a2height = o.find('.article2').height();
        var a3height = o.find('.article3').height();
        var a4height = o.find('.article4').height();
        var a5height = o.find('.article5').height();
        if (a0height > a1height + a1top) {
            $('.article3', o).css('top', a0top + a0height + 20);
        } else if (a0height < a1height + a1top) {
            $('.article3', o).css('top', a1top + a1height + 20);
        }
        $('.article4', o).css('top', a2top + a2height + 20);
        $('.article5', o).css('top', a2top + a2height + 20);
        $('.article6', o).css('top', a2top + a2height + a5height + 40);
        $('.article7', o).css('top', a2top + a2height + a5height + 40);
        var lastChildPos = o.find('div:last-child').position().top;
        var lastChildHeight = o.find('div:last-child').height();
        o.height(lastChildPos + lastChildHeight + 20);
    });
};​

该容器有一个类“.fours”，并且脚本在窗口加载时完美运行。但是当在 ajax 无限滚动加载后调用它时，它无法将绝对 div 正确定位在下一个“.fours”容器内：

function loadArticle(pageNumber) {
    $('a#inifiniteLoader').fadeIn('fast');
    $.ajax({
        url: "wp-admin/admin-ajax.php",
        type: 'POST',
        data: "action=infinite_scroll&page_no=" + pageNumber + '&loop_file=loop',
        success: function(html) {
            $('a#inifiniteLoader').fadeOut('1000');
            $("#content").append(html); // This will be the div where our content will be loaded
            $('.fours:last').preloader_index();
            $('.fours').gridB(); // EDITED from $('.fours:last').gridB();
            $('.article a').on({
                mouseenter: function() {
                    if (!$('.preloader', $(this).parent('.article')).length > 0) {
                        $(this).stop().css('opacity', '1');
                    }
                },
                mouseleave: function() {
                    if (!$('.preloader', $(this).parent('.article')).length > 0) {
                        $(this).stop().css('opacity', '0');
                        $('.article-info', $(this).parent('.article')).stop().fadeTo(200, 0);
                    }
                }
            });
        }
    });
    return false;
}​

出了点问题，但我已经很接近了。如果我在 ajax 成功后调用函数 gridB() 时放置 .fours:last ，则脚本仅计算 div 的顶部位置而忽略高度。如果我删除 :last 脚本不会计算顶部位置和高度。

有什么帮助吗？

编辑：这是相关 HTML 的示例。另一个带类的 div

 <div id="content">
<div class="fours">
  <div class="article article0">
     <div><img src="url" /></div>
  </div>
  <div class="article article1">
     <div><img src="url" /></div>
  </div>
  <div class="article article2">
     <div><img src="url" /></div>
  </div>
  <div class="article article3">
     <div><img src="url" /></div>
  </div>
  </div>
<!-- Next ".fours" div is loaded here with ajax function -->
</div>

编辑 2：在 gridB 函数中，我更改了行 var o = $(this[0]); 到 var o = $(this); 并从 $('.fours:last').gridB(); 更改了函数调用 到 $('.fours').gridB();. 它有效，但现在脚本将所有绝对 div 定位在 ajax 加载的下一组中，并使用第一组文章的值。我认为它更接近解决方案。必须有一种方法来定位由 ajax 加载的容器。:last 不起作用。

4

1 回答 1

0

关于您上次编辑中的评论，您可以执行以下操作来引用上次<div class="fours" />添加的内容：

success: function(html) {
    var $html = $(html);                       // Wrap HTML in jQuery object.
    $('a#inifiniteLoader').fadeOut('1000');
    $("#content").append($html);               // Add created object.

    $html.preloader_index();                   // Use the same object.
    $html.gridB();                             // Call gridB using the same object.
于 2012-10-26T18:22:16.637 回答