手摸手,带你实现移动端H5瀑布流布局
移动端瀑布流布局是一种比较流行的网页布局方式,视觉上来看就是一种像瀑布一样垂直落下的排版。每张图片并不是显示的正正方方的,而是有的长有的短,呈现出一种不规则的形状。但是它们的宽度通常都是相同的
因为移动端瀑布流布局主要为竖向瀑布流,因此本文所探讨的是竖向瀑布流
特点竖向瀑布流布局主要有下面几种特点:
一般出现在移动端 H5 页面底部
主要以图片或视频为主
降低页面复杂度,节省空间,可以容纳更多内容
不规则展示,不会那么枯燥,用户体验好
难以或者说不能滚动到页面最底部
不同于传统的分页,瀑布流因为以上这些特点一般被用在这些场景下:
推荐机制下的信息 即根据用户画像推荐或者运营人员推荐的信息
大分类下的信息流 展示的信息有很多,它们的大分类都是相同的,适合用户不明确详细需要获得什么信息或商品的情况下
各个信息或商品之间没有比较强的相关性 和上面一条类似,展示的不是千遍一律的东西,相对独立的信息或商品也许能让用户意外发掘到想要的东西
实现一般来说主要分为 CSS 实现和 JS 实现
CSS 实现主要是用到一些专门的样式属性,实现起来简单,但是往往会有兼容性问题
JS 实现的方法则 ...
这几种方法帮你快速实现回到页面顶部
背景介绍当页面内容很多的时候,用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时,他可能需要不断滚动鼠标滚轮,这就导致用户体验将很差。鉴于这种情况, “回到顶部”这一功能便出现了。
如今在我们浏览网站的时候,常常能遇见“回到顶部”这个按钮。目前主流的回到页面顶部分表现为两种,一种是直接回到页面的顶部,这种方式简单粗暴;另外一种则是自动滚动间接回到页面顶部,这样一来视觉体验上可能更好,但是用户需要过几秒才能看到顶部内容。
例如掘金,在滚动到一定高度时会出现“回到顶部”按钮,点击后会直接回到页面顶部,就是上文说到的第一种情况。
实现动态显示滚动按钮“回到顶部”并不是一直显示的,而是滚动到一定值才出现的,因此应该在window.onscroll里定义一个判断事件。
123456789101112window.onscroll = function () { var currentHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scr ...