首页 > HTML页面自适应分页?

HTML页面自适应分页?

如果有一个长html内容,如何根据屏幕大小自适应分页,从而达到点击上下页换页的功能。
目前想到的是手动分页,但效果不太好,不知怎么往下进行下去。
求思路指点?


简单点做法是:

  1. 取一行高度rowHeight,可以插入一个p标签看看高度多少

  2. 取文章高度totalHeight,把内容仍进p标签,用jq取高度就行了

  3. 屏幕高度除于rowHeight得出每屏显示行数;totalHeight/rowHeight 总共行数;totalPage=总共行数/每屏行数

这样翻页也容易算了,翻到第n页也就是往下滚动 (n-1)每屏行数rowHeight


两个方向:
1,使用外部容器控制显示高度(高度溢满顶级容器或者定义高度);容器内节点取消事件冒泡;重写touchMove,每次滚动容器高度;(聚划算、花瓣网);
2,非固定行高的列表;可以使用-webkit-flow;根据外部容器offsetHeight高度大致给出N组页面行数(单行控制行数,至于你用-webkit-line-clamp还是容器maxhieight+内部line+height控制都可;)(640高12行,480高8行,720高16行,类似响应式CSS的方式);会根据内容自动调整单行高度;这样,每页内行数一致,但是单行高度不定;缺点就是布局可能再最后一页很恐怖;每次翻页都可以是重新加载容器内部数据;

【热门文章】
【热门文章】