概要:很多电商网站都有瀑布流的应用,早期在蘑菇街看到瀑布流的应用,每个图片宽度一样,不一样的是高度,滚动条滚动到一定位置就会加载图片
<html
>
<head
>
<meta charset
="utf-8" />
<title
>简易瀑布流
</title
>
<style type
="text/css">
* {
margin
: 0;
padding
: 0;
list
-style
: none
;
}
#list {
width
: 1110px
;
margin
: 0 auto
;
}
#list li {
width
: 212px
;
float
: left
;
padding
: 5px
;
}
.div
{
border
: 1px solid
#333;
padding
: 5px
;
margin
-bottom
: 10px
;
}
.img
{
width
: 200px
;
display
: block
;
}
.clearfix
::after {
content
: "";
display
: block
;
clear
: both
;
}
</style
>
<script type
="text/javascript">
window
.onload
= function () {
/*实现:5个li分成5列,通过判断当前哪一个li高度最小,然后把div插入到那个li里面*/
//获取ul元素
var oList
= document
.getElementById
('list');
//获取ul里的li元素
var aLi
= oList
.getElementsByTagName
('li');
//标记flag 用来控制滚动触发函数
var flag
= true;
//json数据
var json
= {
'data': [{
'src': 'http://s11.mogucdn.com/mlcdn/55cf19/180606_71eba4fi6d28dcdfe8c5cbga82i9j_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180524_2i8b422ac3kj01ib90ja7i18kjh88_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/55cf19/180630_4eg021di6l8e0087c6ie0d0k1die1_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180408_12ak0afkihihb401d6gaiilhblkb2_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180510_2hehj25hbkibf6617122h948jc80c_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/p1/160719/36434224_ifqwcojqgi4wgolehezdambqgyyde_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180324_6hb292f3ik9cad2aka6j0e75lbl8e_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180507_7kfbhf7fk49eg9agle3j7ddklkh9k_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180709_6cfh4f8e8c8l9756f8306jf1la2l4_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180424_883kc5c5gfj1f611hh69fj01e91j4_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180423_72h6cjf0li1if4kg89706083d4jl9_800x1200.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180630_29e1877b1f3e4l26l4e32bi85j06d_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180313_6icf64185a0f6fel9glc3bdki4699_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180406_1b0hb0llechgkbh3017j2dd2c88jc_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180509_6dffclbehblh5h9b0k8geik1ejjl6_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180406_1b0hb0llechgkbh3017j2dd2c88jc_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180327_57lj209b86e4d870f5k316j68bc8l_800x1200.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180414_4gg153j361cl5i288156lh7jbai19_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180630_29e1877b1f3e4l26l4e32bi85j06d_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180705_4gc67cajk6hib80kj67d6akh2ifga_640x936.jpg_240x320.v1cAC.webp'
},
],
'imgH': [{
'height': '232px'
}, {
'height': '264px'
}, {
'height': '300px'
},
{
'height': '289px'
}, {
'height': '267px'
}, {
'height': '278px'
},
{
'height': '300px'
}, {
'height': '234px'
}, {
'height': '271px'
},
{
'height': '251px'
}, {
'height': '363px'
}, {
'height': '333px'
},
{
'height': '333px'
}, {
'height': '320px'
}, {
'height': '300px'
},
{
'height': '333px'
}, {
'height': '320px'
}, {
'height': '300px'
},
{
'height': '333px'
}, {
'height': '320px'
},
]
}
getLoad
();
//加载数据方法
function getLoad
() {
for (var i
= 0; i
< json
.data
.length
; i
++) {
var min = myMin
();
var oDiv
= document
.createElement
('div');
oDiv
.className
= 'div';
var oImg
= document
.createElement
('img');
oImg
.className
= 'img';
oImg
.src
= json
.data
[i
].src
;
/*这里必须要设置高度,测试中发现js会把每一个节点、属性
创建好,然后再加载入图片,不设置一开始就不能比较li的高度*/
oImg
.style
.height
= json
.imgH
[i
].height
;
oDiv
.appendChild
(oImg
);
//高度最小的li插入div
aLi
[min].appendChild
(oDiv
);
}
flag
= true;
}
//获取到当前li高度最小的索引
function myMin
() {
var index
= 0;
var min = aLi
[index
].offsetHeight
;
for (var i
= 1; i
< aLi
.length
; i
++) {
if (aLi
[i
].offsetHeight
< min) {
index
= i
;
min = aLi
[index
].offsetHeight
;
}
}
return index
;
}
//监听滚动
window
.onscroll
= function () {
//要获取当前页面的滚动条纵坐标位置
var scroT
= document
.documentElement
.scrollTop
|| document
.body
.scrollTop
;
//获取页面可视区的高度
var clieH
= document
.documentElement
.clientHeight
|| document
.body
.clientHeight
;
//获取到当前li高度最小的索引
var minN
= myMin
();
//这里判断加载是刚出现空白就加载,也就是滚动到了高度最小那一列完了
if ((aLi
[minN
].offsetTop
+ aLi
[minN
].offsetHeight
) < (scroT
+ clieH
)) {
if (flag
) {
flag
= false;
getLoad
();
}
}
};
};
</script>
</head
>
<body
>
<ul id
="list" class="clearfix">
<li
></li
>
<li
></li
>
<li
></li
>
<li
></li
>
<li
></li
>
</ul
>
</body
>
</html
>
总结:
在Html页面中创建ul,再在ul创建5个li,5个li分成5列,
通过滚动条监听事件,判断当前哪一个li高度最小,
然后把div插入到那个li里面
「三年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - JS-瀑布流