javascript - 使用 Javascript/jQuery 将 HTML 拆分为多列

Question

注意:这是解决此问题的替代计划方法:Multiple column articles in Joomla

我有一个客户想要多列布局，该布局应该从非列 HTML block 自动生成。

使用 JavaScript(和 jQuery)从单个 HTML block 创建多列系统的可行性如何？如果可能的话我将如何去做？

谢谢。

Answer 1

这只是一个如何解决您的问题的示例。当然，这个解决方案可以改进。

function textSplitter(){
}

textSplitter.prototype.LENGTH_TO_SPLIT=5000 //max chars in single line

textSplitter.prototype.split=function(id){
    var contentDiv=document.getElementById(id); // get an element
    var text=contentDiv.innerHTML; 
    var length= text.length; 
    if(length){
        var div1sbstr=text.substring(0,this.LENGTH_TO_SPLIT); //take a substring
        var div1=document.createElement("div");
        contentDiv.appendChild(div1); // append it
    }
    if(length>this.LENGTH_TO_SPLIT){
        var div2sbstr=text.substring(this.LENGTH_TO_SPLIT,this.LENGTH_TO_SPLIT*2);
        var div2=document.createElement("div");
        contentDiv.appendChild(div2);
    }
    if(length>this.LENGTH_TO_SPLIT*2){
        var div3sbstr=text.substring(this.LENGTH_TO_SPLIT*2,this.LENGTH_TO_SPLIT*3);
        var div3=document.createElement("div");
        contentDiv.appendChild(div3);
    }
}