复制 HTML 子节点数组的一半答案

【问题标题】：Copy half of an HTML child nodes array复制 HTML 子节点数组的一半
【发布时间】：2010-10-06 09:02:29
【问题描述】：

我有一个 HTML 元素（假设是 division），其中包含一组标题 (h2) 和段落 (p)，其中包含其他元素（例如一些链接，a）。

我的目标是将我的 HTML 元素切割成 2 个相同大小的元素。

约束：段落、标题和块不应被剪切

我的想法是浏览子节点列表并复制每个段落的childNodes。

每次我复制一个段落时，我都会计算大小，以便知道我是否达到了除法的一半。

这里有一些代码来解释它：

var elm = document.getElementById('article_colonnes'); // I want to cut this into 2 parts
var paragraphesNumber = paragraphes.length;
var halfSize = elm.innerHTML.length / 2 ;
var col1 = document.getElementById('col1');
var col2 = document.getElementById('col2');
var i=0;
do {
  var node = createNodeFromParagraphe(paragraphes[i]);
  if(node) {
    col1.appendChild(node);
    // update the size of the 1st column by updating inner HTML
    col1String = col1String + paragraphes[i].innerHTML;
  }
  i++;
  // compute the size of the 1st column
  col1Size = col1String.length;
}
while(col1Size < halfSize  || i < paragraphesNumber) ;

我对第二列也这样做。

感谢您的帮助。

【问题讨论】：

或许您可以解释一下这样做的目的是什么，然后我们可以进一步提供帮助？
我想他想要一个自动的两列布局。我认为带有浮动元素的纯 CSS 解决方案可以做到这一点，而不需要所有的 JavaScript 麻烦。
更好的是，他可以使用多列布局，除了IE之外的所有主流浏览器都支持。 IE 用户只能忍气吞声。

标签： javascript html

【解决方案1】：

要获得真正的两列布局，您需要段落的高度（而不是其中的字符）。这里的问题：获取高度的唯一方法是等待浏览器布局页面除非您指定每个元素的宽度。否则，用户会看到难看的闪烁。

所以我建议试试这个：

使用大多数浏览器支持的多列布局。如果浏览器不是 IE
对于 IE 7 及更低版本，为所有元素设置固定宽度。等待浏览器布局页面（在 body.onload 或页面末尾的脚本标记中运行此代码就足够了）。将所有元素放入 id 为“col1”的 div 中。
使用 JavaScript 在 div "col1" 的一半高度处查找元素。 (see here)
如果此元素是标题，则跳过一个元素。
将下一个元素（以及所有其他元素）移动到 div“col2”中。

这应该会给你一个更长的 col1 和一个更短的 col2。

如果移动不起作用，则在确定分割点后插入一个不可见字符，获取 col1.innerHtml，在分割字符处将其分割，并将生成的两个字符串用作 col1 和 col2 的 innerHtml。

如果闪烁很多，请尝试在脚本运行时隐藏 col1 和 col2 (display='None')。

【讨论】：

【解决方案2】：

如果您尝试进行自动两列布局；看看multicolumnlists

【讨论】：