投稿    登录
  您好,欢迎光临崔庆才的博客,最近博主在忙复习考试,可能评论和友链不能及时回应,请谅解,至17.1.12解除!

jQuery应用五之瀑布流效果的实现

JavaScript 崔庆才 4232浏览 0评论

综述

这里我们来利用jQuery实现瀑布流效果。

在线演示

我们首先来在线演示一下效果,然后我们说一下是怎样的实现,点开链接进行预览吧

在线预览

代码分析

首先我们在页面中加入了一些图片元素,都加到id为container的元素中,每一张图片都在一个class为box的容器里,然后里面是一张图片。

在JS中,我们遍历了每一个box,实现box的位置为上一行高度最小的box的位置。

最后实现了滚动条滑动时的动态加载

调用如下

通过上述简单的设置我们就实现了瀑布流的效果。

源码下载

源码下载

综述

以上便是瀑布流效果的实现,希望对大家有一定帮助!

转载请注明:静觅 » jQuery应用五之瀑布流效果的实现

喜欢 (19)or分享 (0)

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的