html登录页面分成左右,javascript – 将HTML分成页面,拆分长段落

好吧,我甚至不确定这是否可以用我目前的方法来完成.我正在尝试将

HTML文档的内容放入当前视口大小的页面中.我目前正在通过迭代所有文档的元素并检查它们的顶部偏移是否在当前页面的边界内,每当它不是时,这个偏移成为新页面的开始并且页面边界被设置为该偏移加上视口的高度.

我面临的问题是,通常会有一个元素(例如一个段落),其高度大于视口本身,所以即使算法将此元素放在新页面的开头,其内容也会溢出.我试图找到一种方法来分割这些元素,使第一个切片占据页面的剩余部分.

这带来了更多困难.即使我能找到一种方法来确定一个段落的文本仍然适合页面的其余部分,并且这本身已经证明是非常困难的,我仍然会遇到DOM在分割之后没有立即更新的问题.段落,这将搞乱下一页的计算或至少迫使我打破递归,这将使算法复杂化更多.

有关如何以第一个切片占用页面上剩余空间的方式拆分段落的任何建议都是受欢迎的.到目前为止这是我的代码：

编辑：值得注意的是,这只适用于非常简单的HTML,没有绝对定位或浮动的元素.在我的情况下,这不是问题.

var elementIndex = -1;

var pages = 1;

var pageBoundary = 0;

var pageBreaks = [];

function calculatePages() {

//first page boundary is window height

pageBoundary = $(window).height();

//do calculations

iterateElements($("body"));

//print results

console.log(pageBreaks);

}

function iterateElements(parent) {

$.each($(parent).children(), function(i, e) {

//increase current element index

elementIndex = elementIndex + 1;

//get element's top offset

var offsetTop = $(e).offset().top;

//get the last position that the element occupies

var elementSpan = offsetTop + $(e).outerHeight();

if ($(e).children().length == 0) { //only leaf nodes will be set as page breaks

//element's start position is outside page boundary

if (offsetTop >= pageBoundary) {

//mark page start with red in order to visualize

$(e).attr("style", "border-top: 1px solid red");

//increase page count

pages = pages + 1;

//new page starts at element's top, next page boundary

//is element's starting position plus the viewport's height

pageBoundary = offsetTop + $(window).height();

//store index of page break

pageBreaks.push(elementIndex);

}

//element's start position is inside current page, but contents overflow

else if (elementSpan >= pageBoundary) {

//NO IDEA WHAT TO DO HERE

//NEED A WAY TO SPLIT LARGE ELEMENTS

}

}

iterateElements(e);

});

}

$(function() {

calculatePages();

});