今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,下面通过本文给大家分享利用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在线视频教程可以免费观看!









