瀑布式刷新

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

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

1.  照片墙
   

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

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

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

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

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

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

所以，我们需要通过JS来实现。（我们先来理一下思路）

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

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

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

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

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

2. 瀑布式下拉效果

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

那么，怎么判断页面快要到底部了呢？

我们先来获得几个高度。

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

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

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

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

我们看一下完整代码