`

Javascript 瀑布流式布局及其动态效果的实现

 
阅读更多

参考:http://test.yvlou.com/?p=74

瀑布流式布局在很多地方都能看到了,pinterest(pinterest.com)上有很棒的瀑布流布局。可以通过如下方法实现一个瀑布流式布局。

(参见瀑布流式布局Demo,图片来自pinterest~~)

 

  1. 每个流的宽度是相同的,记为w,显然每个元素的高度是不一定相同的。
  2. 根据屏幕的宽度和w得到流的列数,记为column。
  3. 每列的初始高度为0。
  4. 找到当前最短的列i,把新的元素排到第i列,并更新列i的长度(把元素的高度加上即可)。
  5. 重复4直到排列完成所有的元素。

重新排列,重新排列发生在显示区域的宽度发生变化的时候,比如当变窄时候,元素就会被挤到下面去。那么如何实现重新排列呢?其实很简单,只要按照刚刚的方法重新计算一遍,就可以得到新的位置了,区别仅仅在于参数column发生了变化。不过这个还不够酷,在尝试加上一些动态效果。一种可行的方法就是让元素块从原来的位置移动到新的位置,这样看起来就像自适应的布局了,而且效果不错。

在实现中,可以通过Ajax从后台读取数据,通过js设置元素的位置来进行布局,并且绑定resize事件的处理函数,动画效果可以使用jquery的animate,使用jQuery实现了一个简单的demo,参见 http://aftercake.com/demo/,调整窗口大小可以进行重新排列。当然了,有很多插件可以实现更强大的功能~~,比如

http://masonry.desandro.com/,以后就只需要写几行代码了。。。

分享到:
评论
1 楼 coding1688 2013-01-16  
博主说的不错,我在实现瀑布流布局时也用的masonry插件,有兴趣的可以看看:四步轻松搞定瀑布流布局http://www.vktone.com/articles/waterfall-layout-use-jquery-masonry.html

相关推荐

    纯css3实现横向瀑布流布局,横向瀑布流代码.zip

    综上所述,这个压缩包中的"横向瀑布流代码"很可能包含了一个使用CSS3和可能的JavaScript技巧实现的横向瀑布流布局示例。通过深入研究这些代码,你可以学习到如何在没有依赖外部库的情况下,利用现代CSS3特性构建美观...

    仿Pinterest网格瀑布流响应式布局代码

    瀑布流布局是一种非传统的一列或多列布局方式,它不按照等宽或等高的规则来排列元素,而是允许元素根据其内容或浏览器窗口的宽度动态调整大小和位置。这种布局方式在图片展示网站和社交媒体平台中非常流行,因为它...

    瀑布流式页面布局源码

    前端UI设计中的瀑布流布局,主要是通过JavaScript库,如jQuery,配合CSS来实现。jQuery提供了一些方便的API,使得动态调整元素位置和响应窗口大小变得更加简单。在这个主题中,我们主要关注如何使用jQuery实现瀑布流...

    瀑布流布局 WaterfallLayout

    3. **响应式设计**:瀑布流布局需要考虑不同设备和屏幕尺寸下的适配。使用媒体查询(Media Queries)可以确保布局在手机、平板和桌面等不同设备上都能正常工作。 4. **图片懒加载**:由于瀑布流布局可能包含大量的...

    瀑布流布局,点击加载更多效果

    在JavaScript中,jQuery库为实现瀑布流布局提供了便利。jQuery提供了强大的DOM操作功能,使得动态调整元素位置变得更加简单。要实现瀑布流布局,首先需要获取所有待布局的元素,并计算它们的宽高比。然后,根据容器...

    html5响应式动态网格图片瀑布流布局

    综上所述,HTML5响应式动态网格图片瀑布流布局结合了HTML5的语义化元素和媒体查询、CSS3的Flexbox或Grid布局以及JavaScript的动态加载和布局算法,提供了一种高效、美观且适应性强的网页设计解决方案。无论是在大...

    瀑布流式页面布局源码--(AJAX与静态两种实例)

    在提供的"pubu"文件中,可能包含了实现这种布局的源代码示例,你可以通过阅读和分析代码,加深对瀑布流布局原理和实现方式的理解。在实际项目中,结合自身需求进行调整和优化,创造出更具个性化的瀑布流效果。

    JavaScript 瀑布流 吸顶 兼容IE FF Chrome

    JavaScript瀑布流布局是一种常见的网页设计模式,常用于展示图片或者文章列表,使它们自适应不同屏幕尺寸,呈现出一种像瀑布一样流动的效果。这种布局方式在响应式设计中尤其受欢迎,因为它能够有效地利用有限的空间...

    javascript 实现瀑布流.zip

    通过以上知识点的学习和实践,可以实现一个基本的JavaScript瀑布流布局。在这个提供的压缩包中,`瀑布流.html`和`瀑布流2.html`很可能是示例代码,可以作为学习和参考的起点。`新建 PPTX 演示文稿.pptx`和`新建 XLSX...

    白色纯净简洁的瀑布流布局html5模板_html5 bootstrap 响应式模板UI前端源码.rar

    瀑布流布局是一种常见的网页设计模式,它以一种不规则的方式排列元素,使页面看起来像瀑布一样自上而下流动。这种布局方式常用于图片展示、社交媒体应用和电子商务网站,因为它可以提供良好的视觉体验,使用户在浏览...

    动态瀑布流网页布局 Jquery 源码

    在本案例中,我们将关注的是基于jQuery实现的动态瀑布流布局。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画制作等任务。在动态瀑布流布局中,jQuery的灵活性和易用性使其成为理想...

    瀑布流图片布局以及打开点击图片动画特效

    在这个插件中,`jquery-pbl`很可能是一个基于jQuery实现的瀑布流布局插件。它可能包含了图片的加载、布局计算、以及与用户的交互功能,如点击图片后的放大显示和动画效果。 点击图片后的动画特效是提升用户体验的...

    javascript 瀑布流布局,ajax数据加载

    瀑布流布局,也被称为Masonry...总的来说,实现JavaScript瀑布流布局结合AJAX数据加载,需要对DOM操作、事件监听、异步请求以及布局算法有深入理解。通过精心设计和优化,我们可以创建一个既美观又高效的数据展示界面。

    使用动态加载懒加载瀑布流布局以及LightBox实现一个图片搜索效果

    本项目通过结合动态加载(懒加载)、瀑布流布局以及LightBox技术,实现了一个出色的图片搜索效果。接下来,我们将深入探讨这些技术及其在实际应用中的具体实现。 1. **动态加载(懒加载)** 动态加载,也称为懒...

    jquery实现瀑布流布局方式

    jQuery是一个轻量级、高性能的JavaScript库,它为开发者提供了丰富的DOM操作、事件处理和动画效果等功能,因此使用jQuery实现瀑布流布局非常常见。 首先,我们需要理解瀑布流布局的基本原理。在网页上,瀑布流布局...

    javascript瀑布流demo(源代码)

    JavaScript瀑布流布局是一种常见的网页设计技术,主要用于展示内容如图片、文章等,使得这些内容能够以多列并排的方式自适应地填充页面空间,形成一种类似瀑布的效果,即新行的顶部与前一行的底部对齐。在这个...

    原生JS瀑布流布局,无限加载

    在原生JavaScript中实现瀑布流布局,不仅可以避免对特定库或框架的依赖,还能提高页面性能,特别是在处理大量数据和动态加载时。 一、瀑布流布局的基本原理 1. 确定列数:首先,我们需要确定页面的列数。这通常基于...

    微信小程序图片瀑布流布局demo

    5. **JavaScript处理**:在实际应用中,瀑布流布局往往需要结合JavaScript进行实时更新。当用户滚动到页面底部时,通过API加载更多数据,同时保持布局的连续性。这涉及到监听滚动事件,计算滚动位置,以及适时地添加...

    基于jQuery实现瀑布流效果

    6. **无限滚动**:为了提高用户体验,通常会结合Ajax技术实现无限滚动,当用户滚动到底部时,动态加载更多内容,保持瀑布流布局的连续性。 7. **插件使用**:jQuery有许多优秀的插件可以帮助快速实现瀑布流,如`...

    JS实现瀑布流布局

    在实现瀑布流布局时,还需要考虑到响应式设计,确保在不同屏幕尺寸和分辨率下,瀑布流布局也能保持良好的展示效果。 在给出的代码示例中,页面主体包含了一个名为`main`的容器,内部有多个`box`元素,每个`box`代表...

Global site tag (gtag.js) - Google Analytics