微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

利用JS实现简单的瀑布流加载图片效果

今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。

原理是:

1.设定一行中的列数;

2.取第一行中每一个div的高度并把每一个高度放进一个数组中;

3.算出数组中最小高度的index值;

4.把第二行的第一个div放到最小高度的div的下方并把重新算出的高度值放进数组中,重新计算最小高度的index值;

5.以此类推实现多栏布局的瀑布流效果

6.如果最后一张div的高度已滚动出现在底部时创建新的div添加到最后一张的后面,不断循环以达到加载效果;接下来代码实现。

rush:js;">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
rush:js;"> *{padding: 0;margin: 0;} #main{ width: 1000px; margin: 0 auto; position: relative; } .Box{ display: inline-block; float: left; padding: 10px 0 0 10px; } .Pic{ border: 1px #ccc solid; padding: 10px; border-radius: 8px; } .Pic img{ width: 162px; }

js代码

rush:js;">

效果图如下:

以上所述是小编给大家介绍的利用JS实现简单的瀑布流加载图片效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文地址:https://www.jb51.cc/js/39803.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐