在JS中使用页面创建内容拆分

Question

我正在尝试使用JavaScript创建页面来实现内容拆分。

逻辑是，如果左侧或右侧的高度大于650px，则将附加容器2，该部分将从第一页开始切割，并从该点继续第二页，并带有标题。

第一页将是2列，其余页面内容将是全宽。

还附上了一个插图，以展示它应该如何显示。

如果有人能帮助我，我们将不胜感激。

提前致谢。

干杯！

Answer 1

使用.innerHeight()是一个好主意，你应该这样做。

我做了一个fiddle where it only works for the right column，但是我知道如何使用它来处理它们。

<小时/> 这是代码的JS部分：

var leftColHeight = $('.col-left').innerHeight();
var rightColHeight = $('.col-right').innerHeight();

var divs = [];

var heights = 0;
var toShow;

if (leftColHeight > 650 || rightColHeight > 650) {
    $('.col-right').innerHeight(650).css("overflow", "hidden");
    $('.col-right > div').each(function() {
        divs.push($(this));
        if(toShow === undefined)
        {
            heights += $(this).height();
            if (heights >= 650)
            {
                toShow = divs.length-1;
            }
        }
    });
    $('body').append('<div class="container2"></div>');

    for (var div in divs)
    {
        if(div >= toShow)
        {
            $('.container2').append(divs[div].html());
        }
    }
}

编辑：
my updated fiddle的内容与您正在寻找的内容相近。

但是你应该知道，考虑到你的容器宽度不同，使用普通的JS或CSS，你不能得到溢出的东西。 （但如果你找到了办法，我很乐意知道） 看一下像dotdotdot这样的库（对于ellipsies，但它可以用简单的溢出来实现）。