3.无限滚动加载
更新于 2026年10月10日
版权声明
3.无限滚动加载
无限滚动加载(Infinite Rolling Load)又被形象地称为瀑布流分页模式。这种无限图片滚动加载的效果靠插件jQuery实现,整个网页内容再多也无须鼠标拖动滚动条来浏览。例如,人流量很大的一些公众网站,如Facebook、Twitter等,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局会不断加载数据块并附加至当前尾部,用户只需轻轻滑动鼠标就能实现图片的全部阅览,几乎不用任何其他操作,这将鼓励访客在网站停留更长的时间,这是近两年比较流行的一种网站页面布局形式。最早采用此布局的网站是Pinterest。国内有名的花瓣网也是采用这样的加载技术来实现的(图1-24)。
图1-25中的HTC网站很有特点。浏览者进入网站后,只需滚动鼠标,画面就会渐大显示,大到极限后又会自动跳转至另一个页面。还有一个特别之处,就是该网站中网页文字的动态抖动效果,让人印象深刻。

图1-24

图1-25(https://www.daowen.com)
图1-26是国外著名的Lieber大脑发展研究所的官网设计。进入网站后,我们看到的是一个动态的犹如宇宙遨游的动画效果,鼠标可以前后滚动,实现前后景物推移的神奇效果。其背景是一些游动的网状星云,随着鼠标滚动,一些小的光斑会逐渐变大,形成圆形的图标。当鼠标移动到这些图标上时,浏览者可以直接点击进入下一级内容。这个设计构思非常独特,视觉效果也很精彩,让人过目不忘。

图1-26
图1-27是一个非常有趣的体育类主题的网站设计。这个网站的亮点在于用户可以通过鼠标移动来阅读一个动态的版式构成效果,可以随意回放一些自己喜爱的元素构成,交互式响应做得很到位,配上网站有节奏的背景音乐,参与感十足。

图1-27