利用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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...