《瀑布流特效.pptVIP

Web前端经典时尚案例 陆荣涛 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 瀑布流特效 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 什么是瀑布流 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 最早采用此布局的网站是Pinterest，逐渐在国内流行开来。 国内大多数清新站基本为这类风格。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 瀑布流布局特点 1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。 2、唯美：图片的风格以唯美的图片为主。 3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 瀑布流布局实现方式 1、传统多列浮动 优点: 布局简单，应该说没啥特别的难点； 不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。 缺点: 列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列； 滚动加载更多数据时，还要指定插入到第几列中，还是不方便。 2、 CSS3 定义 优点: 直接 CSS 定义，最方便了； 扩展方便，直接往容器里添加内容即可。 缺点: 只有高级浏览器中才能使用； 还有一个缺点，他的数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了； 鉴于这两个主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。 3、绝对定位 最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整； 缺点: 需要实现知道数据块高度，如果其中包含图片，需要知道图片高度； JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 瀑布流布局案例 鼻祖：Pinterest 通用类：豆瓣集，花瓣网，我喜欢，读图知天下 美女图片：图丽网 时尚资讯类：看潮网 时尚购物类：蘑菇街，美丽说，人人逛街 品牌推广类：凡客达人 家居o2o类：新巢网小猫家 微博社交类： 都爱看 搞笑图片类：道趣儿 艺术收藏类：微艺术 潮流图文分享：荷都分享网 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. * 地方 * 地方 * * *