今天学习了一个瀑布流加载效果，很多网站都有瀑布流效果，下面通过本文给大家分享利用js实现简单的瀑布流加载图片效果，需要的朋友参考下吧
今天学习了一个瀑布流加载效果，很多网站都有瀑布流效果，瀑布流就是很多产品显示在网页上，宽相同，高度不同，表现为多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
原理是：
1.设定一行中的列数；
2.取第一行中每一个p的高度并把每一个高度放进一个数组中；
3.算出数组中最小高度的index值；
4.把第二行的第一个p放到最小高度的p的下方并把重新算出的高度值放进数组中，重新计算最小高度的index值；
5.以此类推实现多栏布局的瀑布流效果；
这是易秀购主题网分享的一款展示为图片类的类的wordpress主题，WP主题熟悉的朋友应该一眼能看出这是瀑布流修改优化而来。主题并且采用了Ajax加载技术，主题代码非常精简，加载速度非常快。这款图片类主题格式化了几个自定义栏目，分别是price（价格）、from（购买自…）、ob-url（单品url）、shop-url（店铺url）和banner（文章详细页面上部的图片，如果
6.如果最后一张p的高度已滚动出现在底部时创建新的p添加到最后一张的后面，不断循环以达到加载效果；接下来代码实现。
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
*{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代码：
效果图如下：
需要学习js的同学请关注php中文网js视频教程，众多js在线视频教程可以免费观看！
