himushroom / paging

利用margin实现翻页

Home Page:https://himushroom.github.io/paging/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

paging

将后台返回的包含图片一段html显示出来并进行分页处理

实现思路(以文章的行高为基准,使用margin-top实现翻页效果)

  • 最外层套一个div.box,并设置overflow:hidden
  • 在div.box中再嵌套一个div.page设置固定的行高line-height: 36px !important;(此处很重要,设置了行高之后不管用户怎么改变font-size每行文字的高度都是固定的!important可以防止返回的html自带的样式造成层叠),将获取到的文章放在page里面
  • 给外层div.box设置固定的高度,此高度必须为行高的倍数,例子中设置的是720px
  • 翻页效果采取给div.page设置margin-top负值来实现
  • 分页分两种情况考虑:1. 纯文字;2.带图片
  • 如果当前显示出的界面中是纯文字,则按照之前设置的高度不变
  • 如果当前显示出的界面中有图片则获取图片的高度加上之前设置的高度,但是考虑图片过长时,翻页时文章长度突然改变影响用户体验,需要稍作处理(将图片的高度除以行高,最后余下的数就是文章需要多加上的高度)

About

利用margin实现翻页

https://himushroom.github.io/paging/


Languages

Language:HTML 100.0%