将html内容拆分为固定的高度和宽度的div与jQuery

我想将一个大的html页面拆分成更小的固定高度和宽度的块（页面）。将html内容拆分为固定的高度和宽度的div与jQuery

它很容易，如果我知道的网页数 - 我可以首先生成所需数量的网页，然后用源内容子女填补他们：

children = $('#source').children(); 
width = 600; 
height = 600; 

// already generated 'pages' 
divs = $('.page'); 
$(divs).width(width); 

pages = divs.length; 
i = 0; 

for (var c = 0; c < pages; ++c) { 

    var div = $(divs).eq(c); 

    while (i < children.length && div.height() < height) { 
     $(children[i++]).clone().appendTo(div); 
    } 

    if(div.height() > height) { 
     div.contents().last().remove(); 
     i--; 
    } 

}

但我怎么可以做同样的事情，如果我不”吨知道页数？如何用$（'div.page'）包装内容，并在内容结束前继续添加页面？

感谢

来源

2011-10-12 user763017

通用CSS3支持不能很快到达这里。 – Blazemonger

您可能需要使用一个循环，以保持创建网页/内容填充，直到你击出了一些端点，在那里你会跳出循环。这里的关键是动态创建循环中的页面div。您可以使用document.createElement或简单的$（“”）（或其他jQuery方式）。类似这样的：

var i = 0; 
while(true) { 
     if (content /* have more content */) { 
      var page = document.createElement("div"); 
      $(page).addClass('page'); 
      var children = $(content).children(); 
      while (i < children.length && div.height() < height) { 
       $(children[i++]).clone().appendTo(page); 
      } 
      $(body).append(page); 
     } else { 
      break; 
     } 
    }

如果您已经定义了要添加到每个“页面”的内容块，您可能还想使用jQuery的每种方法。

评论是否需要更多帮助。

来源

2011-10-12 14:33:49 jtfairbank

谢谢，但它似乎像这个循环永远不会结束。试图找出为什么.. – user763017

它只是示例代码。你需要确保你的if语句最终会失败（内容变为null或者false或者其他），并且你打破了break语句。或者，您可以（也可能应该）将检查移至while循环（'while（hasContent（））'）。正如我所说，这里关键的一点是，您正在动态创建页面的div元素并添加它们，而不是先把它们全部制作完成。 – jtfairbank

明白了，谢谢！ – user763017

将html内容拆分为固定的高度和宽度的div与jQuery

回答

相关问题