Question

我有一个HTML页面，内容分为两列，如下所示：

<div class="col" style="width:50%;float:left;">
   <div class="section" name="introduction">
      bla bla bla
   </div>
   <div class="section" name="games">
      bla bla bla bla bla bla
   </div>
   <div class="section" name="license">
      bla bla bla bla bla bla bla
   </div>
</div>
<div class="col" style="width:50%;float:right;">
   <div class="section" name="about">
      bla bla bla bla bla
   </div>
   <div class="section" name="contactus">
      bla bla bla bla bla
   </div>
   <div class="section" name="etc">
      bla bla
   </div>
</div>

“col”代表列。非常基本的东西。

如您所见，构成列的部分长度不相等。也就是说，第二部分中的文本多于第一部分。因此，如果浏览器窗口足够小，第二部分将高于第一部分。

我想要完成的是，在列加载后，我想在列之间划分这些部分，以便列尽可能接近等高。因此，如果左侧的列与右侧的列相比较高，则该函数会将适当数量的部分从左列移动到右列。

但是如果浏览器窗口足够大以至于文本不必包装，因为在这个例子中，每个部分都是相当短的文本，所以不需要发生任何事情。它们都是一样的高度。

如果将更多内容添加到某个部分/调整窗口大小，我还希望能够多次调用此函数。

以下是我尝试过的一些Javascript代码：

function sections() {
// collect the height of every section.
sectionheightarray0 = new Array();
sectionheightarray1 = new Array();
for(i=0;i<document.getElementsByClassName("section").length;i++){
sectionheightarray1[i]=document.getElementsByClassName("section")[i].clientHeight;
}
Array.prototype.sum = function() {
var count=0;
for (i=this.length;i--;) {
count+=this[i];
}
return count;
}
// using the height of each of the sections, check if the right side is longer than the left, and if so, make the left side longer by moving a section into the left column.
while (sectionheightarray0.sum()<sectionheightarray1.sum()) {
sectionheightarray0.push(sectionheightarray1.shift());
}
// by default, the left side is always longer than the right. Uncomment to not always have the left side be longer depending on the height
// if (sectionheightarray0.sum()-sectionheightarray1.sum()>(sectionheightarray0.sum()-sectionheightarray0[sectionheightarray0.length-1])-(sectionheightarray1.sum()+sectionheightarray0[sectionheightarray0.length-1])) {
// sectionheightarray1.push(sectionheightarray0.pop());
// }
// swap the sections here.
if (document.getElementById("col1").getElementsByClassName("section").length<sectionheightarray0.length) {
while (document.getElementById("col1").getElementsByClassName("section").length!=sectionheightarray0.length) {
document.getElementById("col1").appendChild(document.getElementById("col2").getElementsByClassName("section")[0]);
}
} else {
if (document.getElementById("col2").getElementsByClassName("section").length<sectionheightarray1.length) {
while (document.getElementById("col2").getElementsByClassName("section").length!=sectionheightarray1.length) {
document.getElementById("col2").insertBefore(document.getElementById("col1").getElementsByClassName("section")[(document.getElementById("col1").getElementsByClassName("section").length-1)], document.getElementById("col2").getElementsByClassName("section")[0]);
}
}
}
sectionheightarray0 = [];
sectionheightarray1 = [];
}
sections();
// if the ser resizes the viewport, repeat the process.
window.onresize=sections;

令人惊讶的是它确实在某种程度上起作用，但正如您所看到的，它不是一个非常干净的解决方案。它占用了大量的空间，我希望有一个更清洁，更小，也许更官方的解决方案。跨浏览器显然是首选。

我知道为此目的存在Columnizer JQuery脚本，但我希望能够在不使用JQuery的情况下完成此操作。部分原因是因为我觉得JQuery很混乱，但主要是因为我不在我网站上的任何其他地方使用JQuery，所以我只是为了这个目的而调用它 - 这对于这么简单的任务来说似乎有点过头了。 Javascript或CSS解决方案都很好。有任何想法吗？提前谢谢。

Answer 1

您可以使用单个包装器和column CSS properties： DEMO

.col {
  column-count:2;
  column-width:50%;
  column-fill:balance;
  /* whatever */
  width:500px;
  margin:auto;
  border:solid;
}
/* Demo purpose : check behavior adding some content via hover */
.col .hover {
  display:none;
}
.col:hover .hover {
  display:block;
}

Answer 2

以下是实现这一目标的方法之一：

HTML标记：

<div class="wrapper">
    <div class="col">...</div>
    <div class="col">...</div>
</div>

CSS：

.wrapper{
    display:table;
    height:100%;
    width:100%;
}
.col{
    display:table-cell;
    vertical-align:top;
}

请在此处查看DEMO。

Answer 3

我会用jQuery编写伪代码，因为我完全忘记了标准的javascript语法。

var leftCols = $("#left").length;    // you can use getElementById instead 
var rightCols = $("#right").length;
var threshold = 3;
var dif = leftCols - rightCols; // or vise versa, you can do different cases
var i = 0;
if (dif >= threshold) {
   $.each("#left", function(this){
     dif = leftCols - rightCols;
     if (dif < threshold) {
       break;
     }
     else {
       // append right div
       $("#right").append(this);
       // remove the element from the left div
       this.remove();
     }
   });
}

这只是我记下来的快速内容，它不应该起作用。如果您遇到如何处理问题的想法，那么这只是一个伪代码，您可以使用它。

在没有JQuery的情况下使两列几乎等于高度

3 个答案: