html - 在TurnJs Flipbook上动态放置大型HTML内容

我不确定这是否是已经讨论过的问题，我尝试在问题列表上搜索，但找不到与之相关的任何内容。
我有一个很大的HTML内容需要使用turn.js绑定。我遇到的问题是，使用turn JS，我必须将HTML拆分为单独的DIV标记作为页面。有没有一种方法反过来绑定一个DIV上的内容，它会根据绑定的内容自动包装到不同的页面？
或者，是否有一种方法可以知道需要将多少数据绑定到每个页面才能使该场景正常工作。

最佳答案

这里有一个将内容拆分为页面的解决方案，并且使用turn.js创建一本书。
这个解决方案的逻辑是检查下一个内容是否可以在当前页面中，或者我们需要创建一个新页面并将内容放在那里。
这段代码从特定的DIV“读取”HTML，并执行magic；）
另外，您可以在jsbin中使用代码。

var width = 400,
    height = 400,
    padding = 20;

// create a tester div. in this `div` we will put the contents and check if we need a new page
var div = $('<div />').css({
  // divide it by 2 because each page is half from the book
  width: width / 2
}).appendTo(document.body);

var index = 0;
var pages = [];
// get all content from the input html
var contents = $('#text').contents();

while (index < contents.length) {
  var content = contents.eq(index).clone();

  div.append(content);
  // check whether the contents exceed the page, if so, remove this content from the page
  if (div.height() > height) {
    content.remove();
    // create a new page
    pages.push(div.clone());
    // reset the tester div's html to check the next content
    div.html('');
  }
  // if this is the last content, push it to a new page and break
  else if (index == contents.length - 1) {
    pages.push(div.clone());
    div.remove();
    break;
  }
  // go to the next content
  else {
    index++;
  }
}

var book = $('#book');
for (var i = 0; i < pages.length; i++) {
  //book.after(pages[i].clone());
  //book.after('<hr />');
  book.append(pages[i]);
}

// init the plugin
book.turn({
  width: width,
  height: height,
  gradients: true,
  acceleration: true
});

.sample-flipbook .page {
  line-height:1 !important;
  font-size:inherit !important;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://www.turnjs.com/lib/turn.min.js"></script>
<link href="http://www.turnjs.com/samples/basic/css/basic.css" rel="stylesheet" />

<div id="book" class="sample-flipbook"></div>

<div id="text">
  <p>Lorem ipsum dolor sit amet, sed probatus dissentias cu. Ex liber error vim. Habeo mollis cu qui, eu cum graeco scripta nostrum, est et delenit suscipit. Eius meliore iudicabit per in, pro numquam fabellas id.
  </p>
  <p>blablabla</p>
    <p>blablabla1</p>
    <p>blablabla2</p>
    <p>blablabla4</p>
    <p>blablabla5</p>
    <p>blablabla6</p>
    <p>blablabla7</p>
  <p>
Ponderum gubergren adversarium pri ad. Mea ne veri scribentur. Nam populo conclusionemque te. Ad albucius voluptatum vix, cum id dicta facilis petentium. His no rebum vivendo. Per esse illum nihil eu, eos affert ceteros ne.
  </p>
  <p>
At mea nostro oportere reprimique. Vim veri facilisi deterruisset in, maiorum referrentur id mea. Vel eligendi euripidis ullamcorper eu. Vix eu veri primis sententiae, sumo eligendi conclusionemque ad his. Ea quando luptatum rationibus eam, et dico aliquid eloquentiam his. Mea primis intellegebat ne, ea regione equidem ullamcorper usu.
  </p><p>
Mel in natum recusabo aliquando, tollit probatus qui in. Ex labore pertinax oportere ius, nobis iudico cu quo. Malis dicunt moderatius eum ex, quaeque consetetur duo ne. Ea veri inimicus mei, vim eu constituam consequuntur.
  </p>
  <p>
Per id ancillae efficiantur. Eam platonem recteque euripidis et. Usu tota dolore tibique id, id libris molestiae mel. Cu odio illud appareat mei. Quis vitae ne usu. Ut eos magna prima.</p>
    <p>Lorem ipsum dolor sit amet, sed probatus dissentias cu. Ex liber error vim. Habeo mollis cu qui, eu cum graeco scripta nostrum, est et delenit suscipit. Eius meliore iudicabit per in, pro numquam fabellas id.
  </p>
  <p>
Ponderum gubergren adversarium pri ad. Mea ne veri scribentur. Nam populo conclusionemque te. Ad albucius voluptatum vix, cum id dicta facilis petentium. His no rebum vivendo. Per esse illum nihil eu, eos affert ceteros ne.
  </p>
  <p>
At mea nostro oportere reprimique. Vim veri facilisi deterruisset in, maiorum referrentur id mea. Vel eligendi euripidis ullamcorper eu. Vix eu veri primis sententiae, sumo eligendi conclusionemque ad his. Ea quando luptatum rationibus eam, et dico aliquid eloquentiam his. Mea primis intellegebat ne, ea regione equidem ullamcorper usu.
  </p><p>
Mel in natum recusabo aliquando, tollit probatus qui in. Ex labore pertinax oportere ius, nobis iudico cu quo. Malis dicunt moderatius eum ex, quaeque consetetur duo ne. Ea veri inimicus mei, vim eu constituam consequuntur.
  </p>
  <p>
Per id ancillae efficiantur. Eam platonem recteque euripidis et. Usu tota dolore tibique id, id libris molestiae mel. Cu odio illud appareat mei. Quis vitae ne usu. Ut eos magna prima.</p>
  </div>

重要的是要说这个解决方案是你的一个方向。最有可能你需要添加更多的代码来完全满足你的需要，但是我为你做了很多。