瀑布式刷新

今天来说说页面的瀑布式刷新方法。实现的是一个照片墙效果,然后随着右边滚动条的拉动,图片不断刷新出来,永远也拉不到底。

瀑布式刷新_第1张图片

要实现这种效果,我们可以分为两个步骤,先实现照片墙,自动布局效果,然后再实现下拉刷新效果。

  1.  照片墙
    
瀑布式刷新_第2张图片

新建一个页面,我们先添加一些图片内容。

参考上图依次添加,我这里添加了15个。

由于现在我们没有加任何效果,所以图片是依次往下显示的,而且每张图片的大小也不一样。

瀑布式刷新_第3张图片

所以,我们先给图片添加一些样式。

瀑布式刷新_第4张图片

很简单的一段代码,先给容器设置相对布局,然后给图片固定长度,同时添加一点阴影效果,稍微美化一下。

瀑布式刷新_第5张图片
瀑布式刷新_第6张图片

这样做出来的效果是不会自动布局的,而且也不具备响应式效果。(即页面大小改变时,布局也跟着改变)

所以,我们需要通过JS来实现。(我们先来理一下思路)

之所以页面不具备响应式是因为,当页面宽度改变的时候,我们的容器也跟着页面改变,而图片的大小是固定的,所以我们的页面布局也会发生改变。

因此,我们只需要动态的设置容器的宽度。

瀑布式刷新_第7张图片
瀑布式刷新_第8张图片

接下去,我们要找到第一行中,高度最低的那张图片,然后把后面的图片放到那里去。

瀑布式刷新_第9张图片
瀑布式刷新_第10张图片

现在已经完成了图片的自动布局和响应式功能,我们来看看效果。

瀑布式刷新_第11张图片

图片已经实现了自动布局。

  1. 瀑布式下拉效果

我们也先来理一下思路。想要实现下拉刷新,得在滚轮快要拉到底部的时候,给他动态加载新的图片。

那么,怎么判断页面快要到底部了呢?

我们先来获得几个高度。


我们在页面上测试一下。在我轻轻的拉动的时候,三个参数的高度情况。(last_contentheight:scrolltop:pageheight);

瀑布式刷新_第12张图片

所以,我们可以做出如下判断。


当条件达到的时候,我们需要动态的加载图片。

瀑布式刷新_第13张图片

图片的数据这里是模拟的json数据。

我们看一下完整代码

瀑布式刷新_第14张图片
瀑布式刷新_第15张图片

你可能感兴趣的:(瀑布式刷新)