注:如何使用Axure来设计瀑布流呢?文章给出了详细的设计思绪,一同来学习吧!
Pintrest作为瀑布流网站的鼻祖,其一呈现便遭到追捧。提到瀑布流网站,国内的花瓣网不得不提一下,也是将瀑布流做到十分棒的网站,国内的设计师十分喜欢到它上面逛逛,由于上面有很多优秀的设计师搜集的画板内容同样优秀。如何运用Axure来设计这样的瀑布流的效果呢?咱们先来剖析一下这样的网站交互效果,而后再探讨一下设计思绪。瀑布流的网站其实交互很简略,当鼠标滚动到窗口底部超越未必间隔后,页面会自动加载新的数据填充在下方,接续滚动页面到下方底部时,反复雷同的动作。好,咱们来剖析一下完成的思绪:
- 须要一直增添数据,以完成新的数据加载,这个毫无疑难想到的天然是运用中继器来增添数据。
- 咱们能够发现花瓣网的每张瀑布流图片的高度不尽雷同,因而会显的长长短短,也就是说,它的高度是随机的,意义就是说,须要用到随机函数来模板设置每个图片的高度。
- 在滚动条滚动到底部未必间隔时,须要增添数据,这个须要判别窗口的滚动地位和当前中继器的最下方地位作个比拟,如果大于未必值则增添新的数据。
- 另外要留意的是,不能设置中继器按网格方式排布,由于这种方式下,每个数据所占的宽和高是固定大小的,这样就没方法模仿长长短短并且每个图片在垂直方向上是互相紧挨着。这里可能有点难以了解,看看下面的图有助于进一步了解。
关于这一点,咱们能够运用多个中继器来模仿,每个中继器示意一列。单击这里查看在线演示效果。下面来看看详细的完成步骤。一、界面规划增添一个中继器,命名为col1,双击进入编辑形态。这里仅作演示,只用一个矩形示意图片,其它内容疏忽。调整中继器默许矩形大小为200*320,背景颜色为灰色,设置背景暗影效果如下图,偏移都为0,含糊效果大小为默许5,将矩形命名为rect。
设置中继器的垂直方向间距为20。好了,界面规划很简略,先增添一个中继器,等后面事情解决好后,复制几个程度陈列好即可。