Question

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

我真正想要实现的是逐页阅读书籍的效果。我假设需要一些javascript，所以我更喜欢使用jQuery，但如果需要其他框架，那也没关系。

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

提前致谢。

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

除了介绍决定哪些边距被折叠而哪些边缘没有被折叠的算法之外，有什么想法可以解决这个问题？我认为这很难看......

Answer 1

我可以想到一个似乎做你需要的框架（以及更多）：https://github.com/Treesaver/treesaver

Answer 2

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

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

Answer 3

jQuery将为您提供具有height（）函数的元素的高度（以像素为单位）。

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

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

创建新的P标记来中断P标记的其余内容

Answer 4

使用您自己的逻辑来计算html正文中每个元素的 height 使用jQuery代码

$('selector').height();

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

了解更多信息，请访问jQuery Height Documentation

Answer 5

如果有人还在寻找这样的东西，我最近使用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));

如何将html拆分为全屏高度页面？

5 个答案: