小说阅读翻页分页实现思路

最近想做一个小说阅读APP，在阅读界面的编写上卡住了。

使用CSS column 进行分页，数据会集中到一个div里面，可以实现平移，无法实现仿真翻页。

分析小说阅读APP，重点在于对小说内容的切分。

如果按每个字对内容进行切分，阅读加载超慢，每一章大于2千字左右，加上换行，空格等格式字符，切分效率很低

如果小说内容带有格式，可以对内容进行<br>进行切分，没有格式对空格进行切分，我这里对<br>进行切分，段落进行切分让整体长度比较小

数据切分好后，需要对数据进行装载。核心也就是对数据渲染到div的高度进行计算，是否超过容器高度。

这里我使用一个隐藏的DIV，来计算每一页的高度，循环填充分段数据到div里面，并判断div是否超过当前容器高度。

该页的最后一段，极大可能会超出容器高度，所有我们需要对最后一段进行切分，切分成每个字，循环对div进行填充，

直到超出容器高度，回滚div到上一次的没超出的状态，进行一页提交，开始下一页。

大概思路就这里。

伪代码：

var height = window.innerHeight

var data = content.split('<br>')

var firstText = []

for(var i = 0; i < data.length; i++){

    var over = firstText.pop();
	if(over){
		$('div').append(over+"<br>")
	}
    
    var content = $('div').text()  

    $('div').append(data[i] + '<br>')
    
    if($('div').height() > height){
        //还原div上一次状态
        $('div').text(content)
        //段落切分成字
        var words = data[i].split('')   
        for(var j = 0 ; j < words.length; j++){
            $('div').append(words[i])
            if（$('div').height() > height）{
                 $('div').text(content)
                 firstText.push(data[i].substr(j,data[i].length))   
                 //新的一页 渲染dom 
                 // div -> newDiv
				 // ....
                 $('div').empty()
                 break;
            }else{
                content+=words[i]
            }
        }
    }  
}