js实现类似与百度的图片瀑布流效果

首先了解一下什么是瀑布流效果?
你一定试过在百度搜索图片,拉动浏览器的右边的下拉框,图片会一直刷新,但是不管你怎么下拉,图片一直会加载,并且是到了末尾位置开始加载,百度上使用的是远程的图片数据,我这里使用的是使用json模仿的图片数据

我这里工具使用的是Hbuilder,你也可以使用别的像sublime Text,webStorm等开发工具。

废话不多说,开始!

1、index.html文件
插入图片,一共三层,最外层为container,第二层为box(该层是关键),第三层为img_box(图片div),引入外部css文件和js文件
<div id="container"> <div class="box"> <div class="box_img"> <img src="img/1.jpg"> </div> </div> ........//很多box div </div>
2、style.css样式文件
该部分是样式文件:初始化 padding和margin,container div定位(relative),box浮动(float:left),box_img(阴影,圆角)图片大小一致……就不贴代码了,样式设置根据自己的喜好就好

3、app.js文件(关键函数和代码在途中给出了注释)

4、效果:

坚持原创技术分享,您的支持将鼓励我继续创作!~~~///(^v^)\\\~~~