1

我正在修改一些用于将 HTML 内容分页到div. 代码来自此页面上的 jQuery rain 站点：

http://www.jqueryrain.com/?HtS47Rzc

此代码的目的是获取大量 HTML，扫描顶级子元素，并为适合所需高度（例如400px）的每组子元素创建一个页面对象。构建完所有页面后，每个页面都包含在一个新的div. 我遇到的问题是计算的页面在渲染到页面后并不接近所需的高度。因此，不是每个页面都有一个漂亮的文本块，整齐地撞到但不超过包含的底部div，有些页面的文本远远低于所需的页面底部，有些超过页面底部。实际上它们不再超过页面底部，因为我添加了在每个页面都用 a 包装后扫描页面数组div并将容器div设置为最大值的代码div找到的高度。

我的一个想法是包装div导致了差异，所以我明确添加了 CSS 规则以将边距和填充设置为0px. 那没有效果。谁能告诉我如何调整代码以使页面高度计算正常工作？

更新：我正在显示div包含页面的 CSS 和包含它的 DIV。 

.example{
    background:#FFF;
    width:410px;
    border:1px #000 solid;
    margin:20px auto;
    padding:15px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px
}

pagediv都有“page”这个类：

#content .page {
    position:absolute;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    top:0px;
}

这是我的 Javascript 修改代码。请注意，该函数正在处理的对象是div显示分页内容的主要对象：

(function ($) {
    $.fn.extend({
        MyPagination: function (options) {
            var defaults = {
                height: 400,
                fadeSpeed: 400
            };
            var options = $.extend(defaults, options);

            //Creating a reference to the object
            var objContent = $(this);

            // The array of pages we will build.
            var fullPages = new Array();

            // The array of elements for each page, used during pagination calculations.
            var pageElements = new Array();

            // The height for each page, reset after each page is built.
            var height = 0;
            var lastPage = 1;
            var paginatePages;

            // initialization function
            init = function ()
            {
                // Build the array of pages by creating a new page when the sum of the child elements
                //  height values for each page exceeds the desired page height.
                //
                // NOTE:  This is only an approximation.  Haven't figured out why yet.  When the
                //  operation is done there is large variance in the DIV height away from our desired
                //  height, many of them larger than our desired height.
                objContent.children().each(function (i)
                {
                    // Some browsers don't support clientHeight.  In those cases, use offsetHeight.
                    var childHeight = this.clientHeight == 0 ? this.offsetHeight : this.clientHeight;

                    // If the height of all the children in the page elements array exceeds the desired
                    //  page height, start a new page.
                    if (height + childHeight > options.height)
                    {
                        // Start a new page.
                        fullPages.push(pageElements);

                        // Reset the page elements array by initializing it to a new array.
                        pageElements = new Array();

                        // Reset the page height accumulatore. for the next page.
                        height = 0;
                    }

                    // Accumulate the child element's height into the height aggregator variable.
                    height += childHeight;

                    // Add the child element to the child elements array for the page currently being built.
                    pageElements.push(this);
                });

                if (height > 0) {
                    fullPages.push(pageElements);
                }

                // wrapping each full page
                // $(fullPages).wrap("<div class='page'></div>");

                // Wrapping each full page with a DIV.  Give the DIV an ID that contains the page number.
                $(fullPages).wrap(
                        function (ndx) {
                            return "<div class='page' name='pages' id='page_" + (ndx + 1) + "'></div>"
                        });

                // Find the DIV with the maximum height.
                var maxDivHeight = 0;

                for (var ndx = 1; ndx <= fullPages.length; ndx++) {
                    var pageN = document.getElementById('page_' + ndx);

                    // Some browsers don't support clientHeight.  In those cases, use offsetHeight.
                    var divHeight = pageN.clientHeight == 0 ? pageN.offsetHeight : pageN.clientHeight;

                    if (divHeight > maxDivHeight)
                        maxDivHeight = divHeight;
                }

                // Set the height of the content DIV to the maximum height we found plus a little padding.
                objContent.height(maxDivHeight);

                // hiding all wrapped pages
                objContent.children().hide();

                // making collection of pages for pagination
                paginatePages = objContent.children();

                // show first page
                showPage(lastPage);

                // draw controls
                showPagination($(paginatePages).length);
            };

            // update counter function
            updateCounter = function (i) {
                $('#page_number').html(i);
            };

            // show page function
            showPage = function (page) {
                i = page - 1;
                if (paginatePages[i]) {

                    // hiding old page, display new one
                    $(paginatePages[lastPage]).fadeOut(options.fadeSpeed);
                    lastPage = i;
                    $(paginatePages[lastPage]).fadeIn(options.fadeSpeed);

                    // and updating counter
                    updateCounter(page);
                }
            };

            // perform initialization
            init();
        }
    });
})(jQuery);
4

1 回答 1

0

您也许可以在您的元素上使用 getBouningClientRect 。这将为您提供该元素的位置和大小：

var clientRect = element.getBoundingClientRect();

现在您可以获得大小和位置：

var leftPos = clientRect.left;
var topPos = clientRect.top;
var width = clientRect.width;
var height = clientRect.height;

希望这可以帮助！

以下是更多信息的链接：https ://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

于 2013-09-02T03:20:08.580 回答