4

我需要将一些 html 内容拆分为页面，以便每个页面都有屏幕高度和一些预定义的宽度。页面拆分可能发生在段落中间（或者可能是其他一些 html 元素），因此应该以某种方式处理这种情况。

我真正想要达到的是逐页阅读的效果。我认为需要一些 javascript，所以我更喜欢使用 jQuery，但如果需要其他框架，也可以。

我不得不承认我对 HTML 和所有东西都很陌生，如果我的猜测很愚蠢，很抱歉，但目前我正在考虑以下方法：测量可见区域的实际高度（需要弄清楚如何），然后获取我的 html 文档并在标签后逐步获取标签，将其放入不可见的 div 并计算其结果高度。当我的高度超过页面高度时，我就完成了。但是，这种方法不适用于长标签，例如长段落。

提前致谢。

编辑：感谢您之前的回答。我尝试使用手动计算元素大小的方法，遇到了一个我无法很好解决的问题。这是崩溃边距的问题。我要做的是遍历文档中的所有段落并总结 .outerHeight(true) jQuery 调用的结果。这应该给我元素的完整高度，包括填充、边距和边框。它实际上做了它所说的，但这里的问题是它没有考虑到崩溃的边距。因此，我最终得到了错误的整体尺寸（比实际尺寸大），因为浏览器会丢弃一些边距（在我的情况下是相邻段落的边距），但我会考虑到它们。

除了引入决定哪些边距折叠哪些不折叠的算法之外，还有什么想法可以解决这个问题？我觉得丑。。。

4

5 回答 5

2

您可以使用 CSS3 多列规则，例如：http ://www.quirksmode.org/css/multicolumn.html 或者为了支持所有浏览器，请使用 javascript 插件：http ://welcome.totheinter.net/columnizer-jquery -插入/

这个插件甚至有一个多页多列示例：http ://welcome.totheinter.net/2009/06/18/dynamic-multi-page-multi-column-newsletter-layout-with-columnizer/

于 2012-08-30T12:17:09.187 回答
1

我可以想到一个框架，它似乎可以满足您的需求（还有更多）：https ://github.com/Treesaver/treesaver

于 2011-11-11T18:35:07.497 回答
0

使用自己的逻辑，使用 jQuery 代码计算 html 正文中每个元素的高度

$('selector').height();

使用它，您可以计算一些 html 元素的高度，并决定应该在设备屏幕上显示多少元素。

有关更多信息，请访问jQuery 高度文档

于 2014-01-30T17:14:33.447 回答
0

jQuery 将使用 height() 函数为您提供元素的高度（以像素为单位）。

jQuery("BODY").height()将为您提供视口的最大高度（尽管仅当您的内容高度> = BODY 的高度 - 否则它将为您提供主体在视口中占用多少空间的高度。）

计算 P 标签（或其他标签）的高度似乎是一个不错的方法。我想如果您想为大段落分解 P 标签的内容，您可以为页面上的最后一个 P 标签定义最大“破损”高度。然后，您可以通过创建一个新的 P 标签来破坏 P 标签的其余内容jQuery("#the-next-page-id).append(jQuery("<P>"+restOfTheParagraphContent+"</P>"))

于 2011-11-11T22:01:03.543 回答
0

万一有人还在寻找这样的东西，我最近使用 JQuery 做到了。它还将第一页留空（用于标题等）：

https://jsfiddle.net/xs31xzvt/

如果前一个 div 已满，它基本上会遍历可移动项目并将它们插入到新的 div 中。

 (function($) {

    $(document).ready(formatPages)
    function formatPages() {
        var container = $('.container');
        var subPage = $('.subpage').get(0);
        var subPageHeight = subPage.offsetHeight;
        var subPageScrollHeight = subPage.scrollHeight;
        // See how many pages we'll need
        var pages = Math.floor(subPageScrollHeight / subPageHeight) + 1;
        //add a new page
        var pageCount = 2;
        var pageDiv = createPageDiv(pageCount);
        var subPageDiv = createSubPageDiv(pageCount);

        var addPage = function (){
            pageCount++;
            pageDiv = createPageDiv(pageCount);
            subPageDiv = createSubPageDiv(pageCount);
            pageDiv.append(subPageDiv);
            container.append(pageDiv);
            pageContentHeight = 0;
        }
        addPage()
        container.append(pageDiv);
        $('.movable').each(function() {
            var element = $(this);
            //remove the element
            element.detach();
            //try to add the element to the current page
            if (pageContentHeight + element.get(0).offsetHeight > subPageHeight) {
                subPageDiv.append(getFooterDiv().show());
                //add a new page
                addPage();
            }
            subPageDiv.append(element);
            pageContentHeight += element.get(0).offsetHeight;
        });
    }



    function createPageDiv(pageNum) {
        return $('<div/>', {
            class: 'page',
            id: 'page' + pageNum
        });
    }
    function createSubPageDiv(pageNum) {
        return $('<div/>', {
            class: 'subpage',
            id: 'subpage' + pageNum
        });
    }
    function getFooterDiv() {
        return $('.footer').first().clone();
    }
}(jQuery));
于 2016-10-17T17:06:40.580 回答